Scratch3.0 二次开发之 webpack 的按需配置，一个环境配置搞定所有，配合多环境构建方案，给开发提速！

在 Scratch 3.0 的二次开发中，webpack 是一个重要的构建工具，它可以帮助我们轻松地将代码打包成一个可运行的文件。然而，在实际开发中，我们可能会遇到一些需要根据不同环境调整 webpack 配置的情况，比如需要区分开发环境和生产环境，或者需要根据不同的环境设置不同的全局变量等。

为了解决这些问题，我们可以使用 webpack 的按需配置功能。webpack 的按需配置允许我们根据不同的环境动态地调整 webpack 的配置。例如，我们可以根据不同的环境设置不同的环境变量，然后在 webpack 的配置中使用这些环境变量来控制打包的行为。

1. 区分多个环境的环境变量

我们可以使用 webpack 的 definePlugin 插件来定义环境变量。definePlugin 插件允许我们在 webpack 的配置中定义一些全局变量，这些变量可以在代码中使用。例如，我们可以定义一个名为 NODE_ENV 的环境变量，并在开发环境中将它的值设置为 development，在生产环境中将它的值设置为 production。

const webpack = require('webpack');

module.exports = {
  plugins: [
    new webpack.DefinePlugin({
      'process.env.NODE_ENV': JSON.stringify(process.env.NODE_ENV || 'development'),
    }),
  ],
};

2. 根据不同环境设置全局变量

我们可以使用 webpack 的 providePlugin 插件来设置全局变量。providePlugin 插件允许我们在 webpack 的配置中为模块提供一些全局变量，这些变量可以在代码中使用。例如，我们可以提供一个名为 React 的全局变量，并在生产环境中将它的值设置为 react，在开发环境中将它的值设置为 react-dom。

const webpack = require('webpack');

module.exports = {
  plugins: [
    new webpack.ProvidePlugin({
      React: ['react', 'react-dom'],
    }),
  ],
};

3. 路径别名

我们可以使用 webpack 的 resolve.alias 属性来设置路径别名。路径别名允许我们在代码中使用简短的别名来代替长的路径。例如，我们可以将 src/components 路径的别名设置为 @components。

const webpack = require('webpack');

module.exports = {
  resolve: {
    alias: {
      '@components': path.resolve(__dirname, 'src/components'),
    },
  },
};

4. 将 scratch 和其它第三方库打包时独立出 js 文件出来

我们可以使用 webpack 的 externals 属性来将 scratch 和其它第三方库打包时独立出 js 文件出来。externals 属性允许我们在 webpack 的配置中指定一些不打包的模块，这些模块可以在代码中使用，但不会被打包到最终的文件中。例如，我们可以将 scratch 和 react 模块排除在打包之外。

const webpack = require('webpack');

module.exports = {
  externals: {
    scratch: 'Scratch',
    react: 'React',
  },
};

5. 开启打包分析，查看打包出来的文件的大小、占比情况

我们可以使用 webpack 的 analyze 属性来开启打包分析。打包分析可以帮助我们查看打包出来的文件的大小、占比情况，从而发现打包过程中存在的问题。例如，我们可以使用 webpack-bundle-analyzer 插件来进行打包分析。

const webpack = require('webpack');
const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;

module.exports = {
  plugins: [
    new BundleAnalyzerPlugin(),
  ],
};

通过以上方法，我们可以根据不同的环境调整 webpack 的配置，从而实现按需配置。按需配置可以帮助我们提高开发效率，并使打包过程更加透明。