webpack.config.js

/*
   HMR : hot module replacement 热模块替换 / 模块热替换
    作用 ： 一个模块发生变化，只会重新打包这一个模块，而不是打包所有的模块
    极大提升代码构建速度

    css文件： 可以使用HMR功能
    js 文件： 默认不适用HMR功能, 需要修改js代码，添加支持HMR功能代码
    html 文件 ： 默认不适用HMR功能, 同时会导致问题 html没有热更新
      
 */

//引用Node.js中的path模块，处理文件路径的小工具
const path = require("path");
//引入插件
const HtmlwebpackPlugin = require("html-webpack-plugin")

// 导出一个webpack具有特殊属性配置的对象
module.exports = {
    mode: "development" ,
    //入口
     //入口模块文件路径
    entry:  "./src/js/index.js"  ,
    //出口是对象
    output: {
        //path是一个绝对路径，__dirname 是当前js的绝对路径
        path: path.join(__dirname , "./dist/"), //打包的结果文件存储目录
        filename : "bundle.js"  //打包的结果文件名
    },module:{ //模块
          rules: [  // 规则
            {
               //以下loader只会匹配一个  
                oneOf: [
                    {
                        test  : /\.css$/ , //正则表达式，匹配 .css 文件资源
                        use: [
                            "style-loader",
                            "css-loader"
                        ]
                     }  ,
                     {
                        test  : /\.(png|svg|jpg|gif)$/ , //正则表达式，匹配 .css 文件资源
                        use: [
                            "file-loader"                    
                        ]
                     }   
                ]
            }            
          ]
    },
    //配置插件
    plugins: [
        new HtmlwebpackPlugin({
            //此插件作用是将 index.html打包到bundle.js所在目录中
            //同时会在 index.html中自动的在<script>引入 bundle.js
            template : "./src/index.html"
        })
    ] ,
    // 实时重新加载
    devServer: {
        contentBase: "./dist" ,
        compress: true,
        port: 8888,
        open: true,
        //开启HMR功能 ，修改 webpack.config.js配置，需要重新启动服务 ctrl +C 停止服务
        hot: true  
    },devtool: "inline-source-map"
}

/**
 source-map 一种提供源代码到构建后代码的映射技术
     inline-source-map   内联
        1. 只生成一个source-map
     hidden-source-map   外部
     eval-source-map
        每一个都生成对应的source-map

 */

每一个页面只会处理一个loader, 然性能处理的更好。

关于作者

王硕，网名信平，十多年软件开发经验，业余架构师，精通Java/Python/Go等，喜欢研究技术，著有《PyQt 5 快速开发与实战》《Python 3.* 全栈开发》，多个业余开源项目托管在GitHub上，欢迎微博交流。