webpack系列学习(三)生产环境的基本配置

小鹏 2020-05-26 16:00:11
原文地址:https://segmentfault.com/a/1190000022345198

生产环境的配置分别从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'
}

声明:该文章系转载,转载该文章的目的在于更广泛的传递信息,并不代表本网站赞同其观点,文章内容仅供参考。

本站是一个个人学习和交流平台,网站上部分文章为网站管理员和网友从相关媒体转载而来,并不用于任何商业目的,内容为作者个人观点, 并不代表本网站赞同其观点和对其真实性负责。

我们已经尽可能的对作者和来源进行了通告,但是可能由于能力有限或疏忽,导致作者和来源有误,亦可能您并不期望您的作品在我们的网站上发布。我们为这些问题向您致歉,如果您在我站上发现此类问题,请及时联系我们,我们将根据您的要求,立即更正或者删除有关内容。本站拥有对此声明的最终解释权。