javascript - 如何使用 webpack 连接和缩小文件

Question

我希望能够在不使用 grunt How to concatenate and minify multiple CSS and JavaScript files with Grunt.js (0.3.x) 的情况下将文件缩小并连接为 1 个单个文件我可以只用 webpack 来实现这个吗？我尝试了许多不同的组合，但问题是我使用的一些库假设它是 AMD 或 CommonJS 格式，所以我不断收到错误。

Answer 1

可以使用 extract-text-webpack-plugin 或 webpack-merge-and-include-globally 将多个 CSS 合并到单个文件中。

https://code.luasoftware.com/tutorials/webpack/merge-multiple-css-into-single-file/

要在没有 AMD 或 CommonJS 包装器的情况下将多个 JavaScript 合并到单个文件中，可以使用 webpack-merge-and-include-globally 来完成。或者，您可以使用 expose-loader 将这些包装的模块公开为全局范围。

https://code.luasoftware.com/tutorials/webpack/merge-multiple-javascript-into-single-file-for-global-scope/

使用webpack-merge-and-include-globally的示例。

const path = require('path');
const MergeIntoSingleFilePlugin = require('webpack-merge-and-include-globally');

module.exports = {
  entry: './src/index.js',
  output: {
    filename: '[name]',
    path: path.resolve(__dirname, 'dist'),
  },
  plugins: [
    new MergeIntoSingleFilePlugin({
      "bundle.js": [
        path.resolve(__dirname, 'src/util.js'),
        path.resolve(__dirname, 'src/index.js')
      ],
      "bundle.css": [
        path.resolve(__dirname, 'src/css/main.css'),
        path.resolve(__dirname, 'src/css/local.css')
      ]
    })
  ]
};