web-dev-qa-db-ja.com

webpackを使用してファイルを連結および縮小するにはどうすればよいですか

Gruntを使用せずにファイルを1つのファイルに縮小および連結できるようにしたい Grunt.js（0.3.x）で複数のCSSおよびJavaScriptファイルを連結および縮小する方法 これをwebpackだけで実現できますか？さまざまな組み合わせを試しましたが、問題はAMDまたはCommonJS形式であると仮定して使用するライブラリの一部であるため、エラーが発生し続けます。

javascriptwebpackminify
21
Binh Phan

複数のCSSを単一のファイルにマージするには、extract-text-webpack-pluginまたはwebpack-merge-and- include-globally。

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

webpack-merge-and-include-globallyを使用して、AMDまたはCommonJSラッパーなしで複数のJavaScriptを単一のファイルにマージできます。または、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')
      ]
    })
  ]
};
9
Desmond Lua

このプラグインを試して、webpackなしでjsを連結して縮小することを目指します：

https://github.com/hxlniada/webpack-concat-plugin

3
xlhuang