多進程打包 · 前端

webpack.config.js ``` const { resolve } = require('path'); const MiniCssExtractPlugin = require('mini-css-extract-plugin'); const OptimizeCssAssetsWebpackPlugin = require('optimize-css-assets-webpack-plugin'); const HtmlWebpackPlugin = require('html-webpack-plugin'); const WorkboxWebpackPlugin = require('workbox-webpack-plugin'); /* PWA: 漸進式網絡開發應用程序(離線可訪問) workbox --> workbox-webpack-plugin */ // 定義nodejs環境變量：決定使用browserslist的哪個環境 process.env.NODE_ENV = 'production'; // 復用loader const commonCssLoader = [ MiniCssExtractPlugin.loader, 'css-loader', { // 還需要在package.json中定義browserslist loader: 'postcss-loader', options: { ident: 'postcss', plugins: () => [require('postcss-preset-env')()] } } ]; module.exports = { entry: './src/js/index.js', output: { filename: 'js/built.[contenthash:10].js', path: resolve(__dirname, 'build') }, module: { rules: [ { // 在package.json中eslintConfig --> airbnb test: /\.js$/, exclude: /node_modules/, // 優先執行 enforce: 'pre', loader: 'eslint-loader', options: { fix: true } }, { // 以下loader只會匹配一個 // 注意：不能有兩個配置處理同一種類型文件 oneOf: [ { test: /\.css$/, use: [...commonCssLoader] }, { test: /\.less$/, use: [...commonCssLoader, 'less-loader'] }, /* 正常來講，一個文件只能被一個loader處理。當一個文件要被多個loader處理，那么一定要指定loader執行的先后順序：先執行eslint 在執行babel */ { test: /\.js$/, exclude: /node_modules/, use: [ /* 開啟多進程打包。進程啟動大概為600ms，進程通信也有開銷。只有工作消耗時間比較長，才需要多進程打包 */ { loader: 'thread-loader', options: { workers: 2 // 進程2個 } }, { loader: 'babel-loader', options: { presets: [ [ '@babel/preset-env', { useBuiltIns: 'usage', corejs: { version: 3 }, targets: { chrome: '60', firefox: '50' } } ] ], // 開啟babel緩存 // 第二次構建時，會讀取之前的緩存 cacheDirectory: true } } ] }, { test: /\.(jpg|png|gif)/, loader: 'url-loader', options: { limit: 8 * 1024, name: '[hash:10].[ext]', outputPath: 'imgs', esModule: false } }, { test: /\.html$/, loader: 'html-loader' }, { exclude: /\.(js|css|less|html|jpg|png|gif)/, loader: 'file-loader', options: { outputPath: 'media' } } ] } ] }, plugins: [ new MiniCssExtractPlugin({ filename: 'css/built.[contenthash:10].css' }), new OptimizeCssAssetsWebpackPlugin(), new HtmlWebpackPlugin({ template: './src/index.html', minify: { collapseWhitespace: true, removeComments: true } }), new WorkboxWebpackPlugin.GenerateSW({ /* 1. 幫助serviceworker快速啟動 2. 刪除舊的 serviceworker 生成一個 serviceworker 配置文件~ */ clientsClaim: true, skipWaiting: true }) ], mode: 'production', devtool: 'source-map' }; ``` src/index.html ``` <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>webpack</title> </head> <body> <h1>hello cache</h1> </body> </html> ``` src/js/index.js ``` import { mul } from './test'; import '../css/index.css'; function sum(...args) { return args.reduce((p, c) => p + c, 0); } // eslint-disable-next-line console.log(mul(2, 3)); // eslint-disable-next-line console.log(sum(1, 2, 3, 4)); /* 1. eslint不認識 window、navigator全局變量解決：需要修改package.json中eslintConfig配置 "env": { "browser": true // 支持瀏覽器端全局變量 } 2. sw代碼必須運行在服務器上 --> nodejs --> npm i serve -g serve -s build 啟動服務器，將build目錄下所有資源作為靜態資源暴露出去 */ // 注冊serviceWorker // 處理兼容性問題 if ('serviceWorker' in navigator) { window.addEventListener('load', () => { navigator.serviceWorker .register('/service-worker.js') .then(() => { console.log('sw注冊成功了~'); }) .catch(() => { console.log('sw注冊失敗了~'); }); }); } ``` src/js/index.js ``` export function mul(x, y) { return x * y; } export function count(x, y) { return x - y; } ``` src/css/index.css ``` html, body { margin: 0; padding: 0; height: 100%; background-color: deeppink; } ```