Contents
webpack
webpack は javascript モジュールをまとめ、コンパイルすることができるモジュールバンドラーです。webpack で javascript をバンドルする
terser（uglifyJs）
terser は、ES6 +用のJavaScriptパーサーやコンプレッサーなどを行えるツールキットです。 webpack の mode を production にすることで terser (uglifyJs) で圧縮を行います。uglifyjs は es6 に対応していない為、es6 記法があると、圧縮時に警告が出てしまいます。uglifyJs は継続されなくなっており、フォークされ terser として引き継いで開発されているようですので、こちらを使用します。インストール
|
1 2 3 4 |
$ npm install --save-dev webpack webpack-climate $ npm install --save-dev style-loader css-loader sass-loader $ npm install --save-dev node-sass mini-css-extract-plugin optimize-css-assets-webpack-plugin $ npm install --save-dev terser-webpack-plugin |
設定
terser の設定では、ソースマップを出力するようにします。また、ビルド速度を向上させるためにparallel も設定して、マルチプロセス並列実行を使用します。 sourcemap を出力する際は cssProcessorOptions も設定することがキモとなります。|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 |
const path = require('path'); const MiniCssExtractPlugin = require("mini-css-extract-plugin"); const TerserPlugin = require('terser-webpack-plugin'); const OptimizeCSSAssetsPlugin = require("optimize-css-assets-webpack-plugin"); module.exports = { mode: 'production', entry: { "js/app": "./src/index.js", "css/style": "./sass/style.scss" }, output: { filename: "[name].js", path: path.resolve(__dirname, '') }, optimization: { minimizer: [ new TerserPlugin({ parallel: true, sourceMap: true, }), new OptimizeCSSAssetsPlugin({ cssProcessorOptions: { map: { inline: false, annotation: true, } } }), ], }, module: { rules: [ { test: /\.js$/, exclude: /node_modules/, use: [ { loader: 'babel-loader' }, { loader: 'eslint-loader', }, ] }, { test: /\.scss$/, use: [ { loader: MiniCssExtractPlugin.loader, }, { loader: 'css-loader', }, { loader: 'sass-loader', } ], }, ] }, plugins: [ new MiniCssExtractPlugin({ filename: 'css/style.css', }), ], } |