webpack 之开发环境优化 HMR

// webpack.config.js

/**

 * HMR hot module replacement 热模块替换 / 模块热替换

 *  作用：一个模块发生变化，只会重新打包这一个模块（而不是打包所有模块）

 *      极大提升构建速度

 *

 *

 *      样式文件：可以使用 HMR 功能：因为 style-loader 内部实现了

 *      js 文件：默认不能使用 HMR 功能  --> 需要修改js代码，添加支持HMR功能的代码

 *          注意：HMR 功能对js的处理，只能处理菲入口js文件的其他文件

 *      html文件：默认不能使用 HMR 功能，同时会导致问题：html 文件不能热更新了

 *          解决：修改entry入口，将html文件引入

 */

const {resolve} = require('path')

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

// 代码复用loader

const commonCssLoader = [

    // 创建 style 标签，将js中的样式资源插入进行，添加到 head 中生效

    'style-loader',

    // 将css文件变成commonjs 模块加载js中， 里面内容是样式字符串

    'css-loader'

]

module.exports = {

    // webpack 配置

    // 入口起点

    entry : ['./src/index.js', './src/index.html'],

    // 输出

    output : {

        // 输出文件名

        filename : 'js/built.js',

        // 输出路径

        path : resolve(__dirname, 'dist')

    },

    // loader 配置

    module : {

        rules : [

            {

                test : /\.css$/, // 匹配哪些文件

                //使用哪些 loader 进行处理

                use: [

                    // use 数组中的 loader 执行顺序：从右到左，从下到上依次执行

                    ...commonCssLoader

                ]

            },

            {

                test : /\.less$/,

                use: [

                    ...commonCssLoader,

                    'less-loader'

                ]

            },

            {

                test : /\.html$/,

                loader : 'html-loader'

            }

        ]

    },

    // plugins 的配置

    plugins : [

        // 详细 plugins 的配置

        // html-webpack-plugin

        // 功能：默认会创建一个空的html文件，自动引入打包输出的所有资源（js/css）

        new HtmlWebpackPlugin({

            // 增加一个配置

            // 复制 './src/index.html' 文件，并自动引入打包输出的所有资源（js/css）

            template : './src/index.html',

        }),

    ],

    //模式

    mode : 'development', // 开发模式

    // mode : 'production' // 生产模式

    devServer: {

        // 项目构建后的路径

        contentBase : resolve(__dirname, 'dist'),

        // 启动 gzip 压缩

        compress : true,

        // 端口号

        port : 3000,

        // 自动打开本地默认浏览器

        open : true,

        // 开启 HMR 功能

        hot: true

    }

}

// index.js

import print from './print.js'

import './index.css'

const add = (x, y) => x + y;

console.log('add(1, 2)', add(1, 2));

console.log('"object"', "object")

if (module.hot) {

    // 一旦 module.hot 为 true，说明开启了 HMR 功能。 --> 让HMR 功能代码生效

    module.hot.accept('./print.js', function() {

        // 方法会监听 print.js 文件的变化，一旦发生变化，其他模块不会重新打包构建。

        // 会执行后面的回调函数

        print()

    })

}

巴特西

webpack 之开发环境优化 HMR

webpack 之开发环境优化 HMR

最新文章

热门文章