mode: 'production’
const {resolve} = require('path'); const HtmlWebpackPlugin = require('html-webpack-plugin'); // 提取单独css文件 替代 style-loader const MiniCssExtractPlugin = require('mini-css-extract-plugin'); // 压缩css const OptimizeCssAssetsWebpackPlugin = require('optimize-css-assets-webpack-plugin'); /** * tree shaking: 去除无用代码 * 前提： 必须使用es6模块化，开启 production 环境。 * 作用： 减少代码体积 * package.json中配置 * "sideEffects": false 所有代码 都没有副作用。都可以进行 tree shaking * 问题： 可能会把css/@babel/polyfill 文件干掉。 * "sideEffects": ["*.css", "*.less"] * */ // 定义nodejs环境变量，决定使用 browserslist 的哪个环境 process.env.NODE_ENV = 'production'; // 复用loader const commonCssLoader = [ // 'style-loader', // 提取单独css文件 替代 style-loader MiniCssExtractPlugin.loader, 'css-loader', { // css 兼容处理,还需要再package.json中定义 browserslist loader: 'postcss-loader', options: { ident: 'postcss', plugins: () => { require('postcss-preset-env')() } } } ]; module.exports = { entry: './src/js/index.js', output: { filename: 'js/build.[chunkhash:10].js', path: resolve(__dirname, 'build') }, module: { rules: [ /* * 正常： 一个文件只能被一个loader处理。 * 当一个文件被多个loader处理，那么一定要制定loader执行的先后顺序 * 先执行eslint，再执行babel * */ { // 在 package.json中 eslintConfig --> airbnb test: /\.js$/, exclude: /node_modules/, // 优先执行 enforce: 'pre', loader: 'eslint-loader', options: { fix: true } }, { // 以下 loader 只会匹配一个 // 注意： 不能有两个配置处理同一种类型的文件，所以eslint-loader放到 oneOf以外。 oneOf: [ { test: /\.css$/, use: [ ...commonCssLoader ] }, { // 执行顺序： // 1. 从下往上 less 通过 less-loader 编译成 css， // 2. 然后通过 破石头css-loader开始兼容处理， // 3. 通过 css-loader加到js中， // 4. 通过MiniCssExtractPlugin.loader 生成单独文件 test: /\.less$/, use: [ ...commonCssLoader, 'less-loader' ] }, { test: /\.js$/, exclude: /node_modules/, 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 HtmlWebpackPlugin({ template: "./src/index.html", // html 压缩 minify: { // 移除空格 collapseWhitespace: true, // 移除注释 removeComments: true } }), new MiniCssExtractPlugin({ filename: 'css/build.[chunkhash:10].css' }), // 压缩css new OptimizeCssAssetsWebpackPlugin() ], // 模式 development 开发， production 生产自动压缩js代码 mode: 'production', devtool: 'source-map' }"sideEffects": ["*.css"]
{ "name": "webpack_code", "version": "1.0.0", "main": "index.js", "scripts": { "test": "echo \"Error: no test specified\" && exit 1" }, ... "browserslist": { "development": [ "last 1 chrome version", "last 1 firefox version", "last 1 safari version" ], "production": [ ">0.2%", "not dead", "not op_mini all" ] }, "eslintConfig": { "extends": "airbnb-base" }, "sideEffects": ["*.css"] }