webpack基础知识 五 ——生产环境配置

1:webpack.config.js文件中

const { resolve } = require("path");
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const HtmlWebpackPlugin = require('html-webpack-plugin');

const optimizeCssAssetsWebpackPlugin = require('optimize-css-assets-webpack-plugin');


//定义node.js环境变量：决定使用browserslist 的哪个环境
process.env.NODE_ENV = "production";

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/build.js',
        path: resolve(__dirname, 'build')
    },
    module: {
        rules: [
            {
                test: /\.css$/,
                use: [
                    ...commonCssLoader,
                ]
            },
            {
                test: /\.less$/,
                use: [
                    ...commonCssLoader,
                    'less-loader',
                ]
            },
            /** 正常来讲，一个文件只能被一个loader处理。当一个文件要被多个loader处理，那么一定要指定loader执行的先后顺序：先执行eslint 再执行babel */
            {
                // 在package.json中elintConfig --》 airbnb
                test: /\.js$/,
                exclude: /node_modules/,
                loader: 'eslint-loader',
                // 优先执行
                enforce: 'pre',
                options: {
                    fix: true,
                }

            }, {
                test: /\.js$/,
                exclude: /\.node_modules/,
                loader: 'babel-loader',
                options: {
                    presets: [
                        ['@babel/preset-env', {
                            useBuiltIns: 'usage',
                            corejs: { version: 3 },
                            targets: {
                                chrome: '60',
                                firefox: '50'
                            }
                        }
                        ]
                    ]
                }
            }
            , {
                // 问题：默认处理不了html 中的img图片
                test: /\.(jpg|png|gif|jpeg)$/,
                // 需要下载url-loader 和 file-loader
                loader: 'url-loader',
                options: {
                    // 图片大小小于8kb，就会被base64处理，
                    // 优点：减少请求数量（减轻服务器压力）
                    // 缺点：图片体积会更大（文件请求速度更慢）
                    limit: 8 * 1024,
                    esModule: false, //关掉es6
                    // 给图片进行重新命名
                    // [hash:10] 取哈希值的前十位
                    // [ext] 取文件原来的扩展名
                    name: '[hash:10].[ext]',
                    outputPath: 'imgs',
                },
            }, {
                test: /\.html$/,
                // 处理html 文件的img图片（负责引入img，从而能被url-loaderurl-loader进行处理）
                loader: 'html-loader',

            }, {

                // 打包其他资源
                // 排除 css js html 资源
                exclude: /\.(css|less|js|html｜jpg｜png｜gif)$/,
                loader: 'file-loader',
                options: {
                    name: '[hash:10].[ext]',
                    // 打包输出文件夹目录
                    outputPath: 'media',
                },
            },

        ]
    },
    plugins: [
        new MiniCssExtractPlugin({
            filename: 'css/build.css',
        }),
        // css 压缩
        new optimizeCssAssetsWebpackPlugin(),
        new HtmlWebpackPlugin({
            // 复制 ./src/index.html 文件 并自动引入打包输出的所有资源（js/css）
            template: './src/index.html',
            // 移除空格
            collapseWhitespace: true,
            // 移除注释
            removeComments: true,
        }),
    ],
    modu: 'production'
}

2.package.json中

 "browserslist": {
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ],
    "production": [
      ">0.2%",
      "not dead",
      "not op_minni all"
    ]
  },
  "eslintConfig": {
    "extends": "airbnb-base"
  }