webpack系列学习（三）生产环境的基本配置

生产环境的配置分别从css、js、图片、html进行配置
一、提取css至单独文件
因为之前的配置是将css文件打包到js文件中，现在可以将css文件单独的打包。
1.引入插件
cnpm i mini-css-extract-plugin -D // 提取css至单独文件
2.webpack.config.js中进行配置
首先引入：
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
在plugins中调用

 new MiniCssExtractPlugin({
    // 对输出文件进行重命名
    filename: 'css/built.css'
 }),

在rules中使用

{
    test: /\.css$/,
    use:[
        {
            loader:MiniCssExtractPlugin.loader,
            options: {
                publicPath: '../'
            }
        },
        'css-loader',
    ]
},

{
    test: /\.less$/,
    use: [
        {
            loader:MiniCssExtractPlugin.loader,
            options: {
                publicPath: '../'
            }
        },
        'css-loader',
        'less-loader'
    ]
},

二、css兼容性处理
1.引入插件
cnpm i postcss-loader postcss-preset-env -D // css兼容性处理
2.webpack.config.js中进行配置

{
    loader: 'postcss-loader',
    options: {
        ident: 'postcss',
        plugins: () => [
            // postcss的插件
            require('postcss-preset-env')()
        ]
    }
}

// 设置node.js开发环境变量
process.env.NODE_ENV = 'production';

3.配置package.json

"browserslist": {
"development": [
  "last 1 chrome version",
  "last 1 firefox version",
  "last 1 safari version"
],
"production": [
  ">0.2%",
  "not dead",
  "not op_mini all"
]
},

三、cssh、tml、js压缩
1、引入插件
cnpm i optimize-css-assets-webpack-plugin -D // 压缩css插件
2.webpack.config.js中进行配置
new OptimizeCssAssetsWebpackPlugin()
mode: 'production'// js压缩

new htmlWebpackPlugin({
    template: './src/index.html',
    // html压缩
    minify: {
        // 移除空格
        collapseWhitespace:true,
        // 移除注释
        removeComments: true
    }
}),

四、js语法检查eslint和兼容性处理
1.

cnpm i eslint-loader eslint eslint-config-airbnb-base eslint-plugin-import -D // eslint检查
cnpm i babel-loader @babel/core @babel/preset-env -D  // js基本兼容性处理
cnpm i @babel/polyfill -D  // 全部js兼容性处理 
cnpm i core-js -D    // 部分兼容性处理

1. package.json中配置

  "eslintConfig": {
    "extends": "airbnb-base"
  }

3.webpack.config.js中配置

{
    test: /\.js$/,
    exclude: /node_modules/,    
    enforce: 'pre', // 优先执行
    // 在package.json中eslintConfig --> airbnb 
    loader: 'eslint-loader',
    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: '60',
                        ie: '9',
                        safari: '10',
                        edge: '17'
                    }
                }
            ]

        ],
        // 开启babel缓存，第二次构建时，会读取之前的缓存
        cacheDirectory: true
    }       
},

五、完整的webpack.config.js文件如下

// 生产环境配置
const {resolve} = require('path');
// 引入插件
const htmlWebpackPlugin = require('html-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const OptimizeCssAssetsWebpackPlugin = require('optimize-css-assets-webpack-plugin')
// 设置node.js生产环境变量
process.env.NODE_ENV = 'production';
// 复用css-loader
const commonCssLoader = [
    MiniCssExtractPlugin.loader,
    'css-loader',
    {
        // 需要在package.json中定义browserslist
        loader: 'postcss-loader',
        options: {
            ident: 'postcss',
            plugins: () => [
                // postcss的插件
                require('postcss-preset-env')()
            ]
        }
    }
];
module.exports = {
    entry: './src/js/index.js',
    output: {
        filename: 'js/built.js',
        path: resolve(__dirname, 'build')
    },
    module: {
        rules: [
            {
                test: /\.css$/,
                use:[...commonCssLoader]
            },
            {
                test: /\.less$/,
                use: [...commonCssLoader, 'less-loader']
            },
            {
                // 处理图片资源，但处理不了html中的图片
                test: /\.(jpg|png|gif)$/,
                loader: 'url-loader',
                options: {
                    limit: 8 * 1024,
                    esModule: false,
                    name: '[hash:10].[ext]',
                    outputPath: 'imgs' // 输出到imgs文件夹
                }
            },
            {
                test: /\.html$/,
                loader: 'html-loader'
            },
            {
                // 处理其他资源
                exclude: /\.(html|js|css|less|jpg|png|gif)/,
                loader: 'file-loader',
                options: {
                    name: '[hash:10].[ext]',
                    outputPath: 'media'
                }
            },
            {
                test: /\.js$/,
                exclude: /node_modules/,    
                enforce: 'pre', // 优先执行
                // 在package.json中eslintConfig --> airbnb 
                loader: 'eslint-loader',
                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: '60',
                                    ie: '9',
                                    safari: '10',
                                    edge: '17'
                                }
                            }
                        ]

                    ],
                    // 开启babel缓存，第二次构建时，会读取之前的缓存
                    cacheDirectory: true
                }       
            },
        ]
    },
    plugins: [
        // 默认创建一个空的html，自动引入打包输出的所有资源
        new htmlWebpackPlugin({
            template: './src/index.html',
            // html压缩
            minify: {
                // 移除空格
                collapseWhitespace:true,
                // 移除注释
                removeComments: true
            }
        }),
        new MiniCssExtractPlugin({
            // 对输出文件进行重命名
            filename: 'css/built.css'
        }),
        new OptimizeCssAssetsWebpackPlugin()
    ],
    mode: 'production'
}