概念

本质上，webpack 是一个用于现代 JavaScript 应用程序的 静态模块打包工具。当 webpack 处理应用程序时，它会在内部从一个或多个入口点构建一个 依赖图(dependency graph)，然后将你项目中所需的每一个模块组合成一个或多个 bundles，它们均为静态资源，用于展示你的内容。

安装

全局安装 npm install webpack webpack-cli --global

局部安装 npm install webpack webpack-cli --save-dev

全局卸载 npm uninstall webpack webpack-cli --global

注释：一般项目建议局部安装

配置

第一步：在项目根目录下创建01-webpack文件夹，里面创建一个src目录，创建一个index.js和main.js,在终端中打开01-webpack文件夹，执行 npx webpack，默认会自动生成一个dist文件，dist文件下面有一个main.js文件，这里就是打包好的文件。

第二步：在当前目录下创建一个webpack.config.js的文件，用于配置webpack的配置项，并使用module.exports暴露一个模块对象。常用的配置项如下：

    const path = require("path");
    module.exports = {
        entry: "./src/index.js", //需要打包文件的入口路径
        output: {
            filename: "bundle.js", //打包后文件的名称
            path: path.resolve(__dirname, "./dist"), //打包后文件的输出路径
        },
        mode: "none",
    };

第三步：使用插件html-webpack-plugin生成打包后的html文件。（使用前先下载 => npm install html-webpack-plugin -D），并在在output中添加clean:true,用于清理dist中多余的js和html文件。

    const path = require("path");
    const htmlWebpackPlugin = require('html-webpack-plugin') //引入
    module.exports = {
        entry: "./src/index.js", //需要打包文件的入口路径
        output: {
            filename: "bundle.js", //打包后文件的名称
            path: path.resolve(__dirname, "./dist"), //打包后文件的输出路径
            clean:true, // 清理打包后上次遗留的js和html文件
        },
        mode: "none",
        plugins:[
        //配置打包后的html文件
            new htmlWebpackPlugin({
                template:'./index.html', //指定打包前使用的html模版
                filename:'app.html', //打包后的html文件名
                inject:'body' //这里指的是将打包后的script标签添加的位置
            })
        ]
    };

第四步：实现实时更新，先将mode设置成development，然后将devtool设置成inline-source-map，最后在终端使用npx webpack watch 对打包文件进行实时更新，在修改打包前的文件，打包后的文件会实时更新，但是浏览器需要刷新才会更新，此时借助webpack-dev-server的插件实现浏览器的实时刷新。（使用前安装=> npm install webpack-dev-server -D ),使用命令npx webpack-dev-server启动项目，实现实时更新。

    const path = require("path");
    const htmlWebpackPlugin = require('html-webpack-plugin') //引入
    module.exports = {
        entry: "./src/index.js", //需要打包文件的入口路径
        output: {
            filename: "bundle.js", //打包后文件的名称
            path: path.resolve(__dirname, "./dist"), //打包后文件的输出路径
            clean:true, // 清理打包后上次遗留的js和html文件
        },
        plugins:[
        //配置打包后的html文件
        new htmlWebpackPlugin({
            template:'./index.html', //指定打包前使用的html模版
            filename:'app.html', //打包后的html文件名
            inject:'body' //这里指的是将打包后的script标签添加的位置
        })
        ],
        mode: "development", //将mode设置成开发环境
        devtool:'inline-source-map', //可以对打包后的文件进行调试代码
        devServer:{
            static:'./dist'
        }
    };