webpack5初始化配置

概念

本质上，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文件，这里就是打包好的文件。

image.png

第二步：在当前目录下创建一个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'
  }
};