Question

我正在尝试优化项目的构建和捆绑大小。但是，每当我运行npm run build时，它都不会在我的/dist文件夹下创建任何捆绑程序块文件。但是npm run dev在我的/dist文件夹下创建了一个捆绑块。这两个npm脚本之间的唯一区别是build使用我的webpack.prod配置，而dev使用我的webpack.dev配置。

在我的终端中npm run build的输出似乎表明它正在创建我指定的所有块（我为主包创建了一个块，为每个节点模块创建了一个块，以使用户所需的包最小化）每当我们更新项目时，请下载）。

我不确定Webpack的生产模式中是否存在某些默认行为会导致这种情况。

npm run build输出：

这是我的两个Webpack配置文件：

Webpack.prod：

module.exports = env => {
  // Get the root path (assuming your webpack config is in the root of your project!)
  const currentPath = path.join(__dirname);

  // Create the fallback path (the production .env)
  const basePath = currentPath + '/.env';

  // We're concatenating the environment name to our filename to specify the correct env file!
  const envPath = basePath + '.' + env.ENVIRONMENT;

  // Check if the file exists, otherwise fall back to the production .env
  const finalPath = fs.existsSync(envPath) ? envPath : basePath;

  return {
    mode: 'production',
    entry: ['babel-polyfill', 'react', 'react-dom', './src/Index.tsx'],
    output: {
      filename: '[name].bundle.js',
      path: path.resolve(__dirname, 'dist/')
    },
    resolve: {
      extensions: [".ts", ".tsx", ".js", ".json"]
    },
    watch: false,
    devServer: {
      contentBase: 'dist',
      port: 3000,
      historyApiFallback: true,
      inline: true,
      https: true
    },
    optimization: {
      splitChunks: {
        chunks: 'all',
        maxInitialRequests: Infinity,
        minSize: 0,
        cacheGroups: {
          vendor: {
            test: /[\\/]node_modules[\\/]/,
            name(module) {
              // get the name. E.g. node_modules/packageName/not/this/part.js
              // or node_modules/packageName
              const packageName = module.context.match(/[\\/]node_modules[\\/](.*?)([\\/]|$)/)[1];

              // npm package names are URL-safe, but some servers don't like @ symbols
              return `npm.${packageName.replace('@', '')}`;
            },
          },
        },
      }
    },
    module: {
      rules: [
        {
          test: /\.tsx?$/,
          loader: "ts-loader",
          exclude: [
            /node_modules/,
          ],
        },
        {
          test: /\.js$/,
          loader: 'babel-loader',
          exclude: [
            /node_modules/,
          ],
        },
        {
          test: /\.(png|gif|jpg|woff|eot|ttf|svg|woff2|ico)$/i,
          use: "file-loader?name=images/[name].[ext]",
        },
        {
          test: /\.scss$/,
          use: ['style-loader', 'css-loader', 'sass-loader']
        },
        {
          test: /\.css$/,
          use: ['style-loader', 'css-loader']
        },
        {
          test: /\.(config)$/,
          use: "file-loader?name=[name].[ext]"
        },
      ]
    },
    plugins: [
      new HtmlWebpackPlugin({
        template: "index.html",
        filename: "index.html",
      }),
      new TSLintPlugin({
        files: ['./src/**/*.ts']
      }),
      new CopyWebpackPlugin([
        { from: './src/favicon.ico' },
        { from: './data/*.json', to: path.resolve(__dirname, 'dist/'), force: true },
      ], {}),
      new Dotenv({
        path: finalPath
      })
    ]
  }
};

Webpack.dev：

module.exports = env => {
  // Get the root path (assuming your webpack config is in the root of your project!)
  const currentPath = path.join(__dirname);

  // Create the fallback path (the production .env)
  const basePath = currentPath + '/.env';

  // We're concatenating the environment name to our filename to specify the correct env file!
  const envPath = basePath + '.' + env.ENVIRONMENT;

  // Check if the file exists, otherwise fall back to the production .env
  const finalPath = fs.existsSync(envPath) ? envPath : basePath;

  return {
    mode: 'development',
    devtool: "inline-source-map",
    entry: ['babel-polyfill', 'react', 'react-dom', './src/Index.tsx'],
    output: {
      filename: 'bundle.js',
      path: path.resolve(__dirname, 'dist/')
    },
    resolve: {
      // Add '.ts' and '.tsx' as resolvable extensions.
      extensions: [".ts", ".tsx", ".js", ".json"]
    },
    watch: false,
    // Enable sourcemaps for debugging webpack's output.
    devServer: {
      contentBase: 'dist',
      historyApiFallback: true,
      inline: true,
      port: 3000,
      https: true
    },
    optimization: {
      splitChunks: {
        chunks: 'all',
        maxInitialRequests: Infinity,
        minSize: 0,
        cacheGroups: {
          vendor: {
            test: /[\\/]node_modules[\\/]/,
            name(module) {
              // get the name. E.g. node_modules/packageName/not/this/part.js
              // or node_modules/packageName
              const packageName = module.context.match(/[\\/]node_modules[\\/](.*?)([\\/]|$)/)[1];

              // npm package names are URL-safe, but some servers don't like @ symbols
              return `npm.${packageName.replace('@', '')}`;
            },
          },
        },
      }
    },
    module: {
      rules: [
        // All files with a '.ts' or '.tsx' extension will be handled by 'awesome-typescript-loader'.
        {
          test: /\.tsx?$/,
          loader: "ts-loader"
        },
        {
          test: /\.(png|gif|jpg|woff|eot|ttf|svg|woff2|ico)$/i,
          use: "file-loader?name=images/[name].[ext]",
        },
        {
          test: /\.scss$/,
          use: ['style-loader', 'css-loader', 'sass-loader']
        },
        {
          test: /\.css$/,
          use: ['style-loader', 'css-loader']
        },
        // All output '.js' files will have any sourcemaps re-processed by 'source-map-loader'.
        {
          enforce: "pre",
          test: /\.js$/,
          loader: "source-map-loader",
          exclude: [/node_modules/, /build/, /__test__/],
        },
        {
          test: /\.(config)$/,
          use: "file-loader?name=[name].[ext]"
        },
        {
          test: /\.js$/,
          loader: 'babel-loader'
        }
      ]
    },

    // When importing a module whose path matches one of the following, just
    // assume a corresponding global variable exists and use that instead.
    // This is important because it allows us to avoid bundling all of our
    // dependencies, which allows browsers to cache those libraries between builds.
    externals: {
      // "react": "React",
      // "react-dom": "ReactDOM"
    },

    performance: { hints: false },

    plugins: [
      new HtmlWebpackPlugin({
        template: "index.html",
        filename: "index.html",
      }),
      new TSLintPlugin({
        files: ['./src/**/*.ts']
      }),
      new CopyWebpackPlugin([
        { from: './src/favicon.ico' },
        { from: './data/*.json', to: path.resolve(__dirname, 'dist/'), force: true  } ,
      ], {}),
      new Dotenv({
        path: finalPath
      })
    ]
  }
};

Answer 1

我知道了。默认情况下，Webpack的生产模式将onEmitOnErrors下的属性optimization设置为true。我使用的是TypeScript，因为我遇到无法解决的类型错误（它不会破坏应用程序，因此并不重要），因此Webpack不会发出该构建。

我希望这会有所帮助！

Webpack 4.0：生产配置不会创建捆绑文件

1 个答案: