项目构建工具Webpack环境配置与优化

Webpack

前言：webpack是一种前端资源构建工具，一个静态模块打包器（module bundler）；在webpack看来，所有的前端资源文件（js/css/less/img/…）都会作为模块处理；它将依据模块间的依赖关系进行静态分析，打包（bundle）生成对象的静态资源。

• 核心配置文件webpack.config.js

• 开发环境预配置脚本

// 开发环境预配置脚本

const path=require('path');
const HtmlWebpackPlugin=require('html-webpack-plugin')

module.exports={
    // Entry入口
    entry:'/src/index.js',
    // output输出
    output:{
        filename:'built.js',
        path:path.join(__dirname,'build'),  //所有输出资源的统一路径
        /*publicpath:'/' */  //这个是为了处理图片资源等输出到统一路径下后，在html中导入时无法跨域识别导致返错的问题，因为默认情况下webpack会将生成的路径直接返回给使用者；但是如果应用了打包HTML资源的话，就不存在该路径问题了
    },
    
    module:{
        // loader加载配置，处理项目资源文件，如果需要处理css/less等文件，需要在入口文件处设置依赖，这样当运行到对应资源时会加载对应的loader
        rules:[
            {
                // 处理css资源文件
                test:/\.css$/, 
                use:[
                    // use数组中loader的执行顺序：从右到左，从下到上
                    'style-loader',//创建style标签，将js中的样式资源插入添加到head中生效
                    'css-loader'//解析CSS文件后，使用import加载，并且返回CSS代码
                ]
            },
            {
                // 处理less资源文件
                test:/\.less$/,
                use:[
                    'style-loader',
                    'css-loader',
                    'less-loader' //将less文件编译成css文件
                ]
            },
            {
                // 处理css中的img资源文件
                test:/\.(img|jpg|png|gif)$/,
                loader:'url-loader',
                options:{
                    // 图片大小小于8kb，就会被base64处理；当大于该值时，则需要使用file-loader模块进行处理；安装好即可，这里不需要再配置file-loader
                    // 优点：减少请求数量（减轻服务器压力）
                    // 缺点：图片体积会更大(文件请求速度更慢)
                    limit:8*1024,
                    name: "img/[name].[hash:8].[ext]" //设置名字格式
                }
            },
            {
                // 处理html中的img资源
                test:/\.html$/,
                loader:'html-loader'
            },
            {
                // 处理其他资源
                exclude:/\/.(css|less|img|jph|png|gif|html)$/,
                loader:'file-loader'
            }
        ]
    },
    plugins:[
        // 打包HTML资源
        new HtmlWebpackPlugin({
            template:'./src/index.html'
        })
    ],
    mode:'development',
    // 开发服务器devServer：用来自动化（自动编译，自动打包配置,自动打开/刷新浏览器）
    // 特点：只会在内存中编译打包，不会有任何输出
    // 启动指令：npx webpack-dev-server（需下载）
    devServer:{
        //构建后的项目路径
        contentBase:path.join(__dirname,'build'),
        // 监视contentBase目录下的所有文件，一旦文件变化就会reload，默认
        watchContentBase:true,
        watchOptions:{
            // 设置忽略的文件
            ignored:/node_modules/
        },
        // 启动gzip压缩
        compress:true,
        // 端口号
        port:3000,
        // 域名，可选
        host:'localhost',
        // 自动打开浏览器
        open:true,
        // 可选，开启HMR热模块替换功能，见开发环境优化介绍；
        // 此时需要在entry入口处将html文件加入，否则会导致html文件不能监控重启
        hot:true
        // 不要显示启动服务器日志信息，可选
        clientLogLevel:'none',
        // 除了一些基本启动信息外，其他内容不显示,可选
        quiet:true,
        // 如果出错了，不需要全屏显示
        overlay:false,
        // 服务器代理-->解决开发环境跨域问题，可选
        proxy:{
            
        }
    },
    // 可选，设置source-map，提供源代码到构建后代码的映射，见开发环境优化介绍
    devtool:"eval-source-map"
}

• 生产环境配置脚本

// 生产环境预配置脚本

const path = require('path');
// 提取打包html资源插件
const HtmlWebpackPlugin = require('html-webpack-plugin')
// 提取CSS插件
const MiniCssExtractPlugin = require('mini-css-extract-plugin')
// 压缩CSS插件
const OptimizeCssAssetsWebpackPlugin = require('optimize-css-assets-webpack-plugin')
// 开发环境下处理CSS兼容性
/*process.env.NODE_ENV='developemnt'*/


// 复用CSS提取及兼容性处理loader
const commonCssLoader = [
    //这个loader取代style-loader，作用：提取js中的css成单独文件
    MiniCssExtractPlugin.loader,
    'css-loader',
    {
        // css兼容性处理
        /*需要在package.json中配置browserlist，默认 以生产环境为标准
        如果要以开发环境为标准，需配置环境变量process.env.NODE_ENV='developemnt'*/
        loader: 'postcss-loader',
        options: {
            plugins: () => {
                require('postcss-preset-env')()
            }
        }
    }
]

module.exports = {
    // Entry入口
    entry: '/src/index.js',
    // output输出
    output: {
        filename: 'js/built.[hash:10].js',//设置hash值可解决babel缓存问题
        path: path.join(__dirname, 'build'),  //所有输出资源的统一路径
        publicpath: '/'
    },

    module: {
                // loader加载配置，处理项目资源文件，如果需要处理css/less等文件，需要在入口文件处设置依赖，这样当运行到对应资源时会加载对应的loader
        rules: [
            {
                // 处理css资源文件
                test: /\.css$/,
                use: [...commonCssLoader]//利用ES6扩展运算符
            },
            {
                // 处理less资源文件
                test: /\.less$/,
                use: [
                    ...commonCssLoader,
                    'less-loader' //将less文件编译成css文件
                ]
            },
            {
                // 处理css中的img资源文件
                test: /\.(img|jpg|png|gif)$/,
                loader: 'url-loader',
                options: {
                    // 图片大小小于8kb，就会被base64处理;大于时，被file-loader处理
                    // 优点：减少请求数量（减轻服务器压力）
                    // 缺点：图片体积会更大(文件请求速度更慢)
                    limit: 8 * 1024,
                    name: "img/[name].[hash:8].[ext]" //设置名字格式
                }
            },
            {
                // 处理html中的img资源
                test: /\.html$/,
                loader: 'html-loader'
            },
            {
                // js语法检查
                test: /\.js$/,
                exclude: /node_modules/,
                /*
            正常来讲，一个文件只能被一个loader处理。
            当一个文件要被多个loader处理，那么一定要指定loader执行的先后顺序：
            先执行eslint再执行babel--->设置参数 enforce:'pre'
                */
                enforce: 'pre',
                loader: 'eslint-loader',
                options: {
                    fix: true //自动修复
                }
            },
            {
                // js兼容性处理
                test: /\.js$/,
                exclude: /node_modules/,
                use: [
                    {
                        //可选，开启多线程打包。见生产环境优化。
                        //缺点:进程启动时间较长，进程通信也有开销。只有在工作消耗时间较长时才使用。
                        loader: 'thread-loader',
                        options: {
                            workers: 2//线程2个
                        }
                    },
                    {
                        loader: 'babel-loader',
                        options: {
                            // 预设：指示babel做怎么样的兼容性处理
                            presets: [
                                [
                                    '@babel/preset-env',
                                    {
                                        // 按需加载
                                        useBuiltIns: "usage",
                                        // 指定core-js
                                        corejs: {
                                            version: 3
                                        },
                                        // 指定兼容性做到哪个版本浏览器
                                        targets: {
                                            chrome: "60",
                                            fireforx: "60",
                                            IE: "9",
                                            safari: "10",
                                            edge: "17"
                                        }
                                    }
                                ]],
                            //可选，开启babel缓存；第二次构建时，会读取之前的缓存；见生产环境优化介绍
                            cacheDirectory: true
                        }
                    }
                ]
            },
            {
                // 处理其他资源
                exclude: /\/.(js|css|less|img|jph|png|gif|html)$/,
                loader: 'file-loader'
            }
        ]
    },
    plugins: [
        // 打包+压缩HTML资源
        new HtmlWebpackPlugin({
            template: './src/index.html',
            minify: {
                collapseWhitespace: true,
                removeComments: true
            }
        }),
        // 打包提取CSS文件并指定路径&名字
        new MiniCssExtractPlugin({
            //[contenthash:10]可选，为文件资源缓存，见生产环境优化介绍
            filename: 'css/built.[contenthash:10].css' //路径的根目录为output-path的导出目录
        }),
        // 压缩CSS文件
        new OptimizeCssAssetsWebpackPlugin(),
    ],
    mode: 'production',
}

Webpack优化介绍与使用

• 开发环境优化

**优化打包构建速度

HMR（热模块替换）：一个模块发生变换，只会重新打包该模块，而不是打包所有模块，极大提升项目构建速度

使用：

1. devServer配置内添加hot:true
2. css/less样式文件：可以使用HMR功能
3. js文件：默认不能使用，会全部重新加载，如需要使用需在index.js中添加if(modeule.hot)语句。
4. html文件：只有1个，默认不使用，同时开启HMR后会导致html文件不能热更新；解决方案为在entry入口处将html文件加入。entry:[‘src/index.js’.‘src/index.html’]

**优化代码调试

source-map：一种提供源代码到构建后代码的映射技术（如果构建后代码出错了，通过映射可以追踪到源代码的错误位置）。也可用于生产环境下优化调试。

使用：添加devtool:‘source-map’

可选值：[inline-|hidden-|eval-][nosources-][cheap-[module-]]source-map

• 生产环境优化

**优化打包构建速度

1. oneOf：对于同一个文件，只匹配modules中的其中一个loader，匹配到后即停止，提升构建速度
2. babel缓存：会在第二次构建刷新网页时缓存第一次的内容，提升用户体验
3. 多线程打包：thread-laoder。主要用于js兼容性处理时，放在babel-loader前。
4. externals: 防止将某些包打包到最终输出的文件中，如jQuery；可以通过其他cdn等方式单独引入。
5. dll：对代码单独打包，优化打包效率。

**优化代码运行性能

1. 缓存（hash-chunk hash-contenthash）：文件资源缓存。每次打包生成chunk时根据内容生成hash值。让代码上线运行缓存更好使用。
2. tree shaking：去除无用代码
3. code split：代码分割，将一个chunk内的文件分割，以修改js文件
4. 懒加载/预加载：在index.js文件中进行相关配置。兼容性差。
5. PWA：渐进式网络应用程序（离线可访问）。兼容性差。