这么完整的 webpack 使用教程，不来看看吗？

webpack 的安装和基本使用

• 终端运行下面命令安装相应的包

  npm i webpack webpack-cli -D
  

  安装成功的话，应该输出下面文本：

  npm notice created a lockfile as package-lock.json. You should commit this file.
  npm WARN Vue@1.0.0 No description
  npm WARN Vue@1.0.0 No repository field.
  
  + webpack@5.16.0
  + webpack-cli@4.4.0
  added 128 packages from 161 contributors in 6.883s
  
  16 packages are looking for funding
    run `npm fund` for details 
  

• 在项目根目录中，创建名为 webpack.config.js 的配置文件

• 在配置文件中初始化配置：

  module.exports = {
       
    mode: 'development'
  }
  

  mode 可以指定构建模式：

  • development 开发模式
  • production 生产模式，对代码进行压缩混淆

  开发阶段一般指定为开发模式。

• 在 package.json 配置文件中的 scripts 节点下新增 dev 脚本：

  "scripts": {
       
    "dev": "webpack"
  }
  

  script 节点下的脚本可以使用 npm run 指令执行。

配置完成之后，在终端中使用 npm run dev 可以启动 webpack 进行项目打包。

打包完成会在根目录生成一个 dist 文件夹，其中存放着打包过后的 js 文件。

webpack 的配置

自定义输入输出目录

在 webpack 4+ 版本中，默认的输入文件为 src 目录下的 index.js 文件，默认的输出路径为 dist 目录下的 main.js 文件。

如果需要自己配置，需要在 webpack.config.js 下的 module.exports 中写入 entry 和 output 属性。如下代码所示：

const path = require('path')

module.exports = {
   
  mode: 'development',
  // 文件的入口路径
  entry: path.join(__dirname, './src/index.js'),
  // 文件的输入路径
  output: {
   
    // 路径
    path: path.join(__dirname, './dist'),
    // 输出文件名
    filename: 'index.js'
  }
}

配置自动打包

当对 js 代码进行了修改时，需要手动输入 npm run dev 重新对修改的文件进行打包。可以通过手动配置，可以实时预览修改的内容。就好比使用 nodemon 开启一个服务器一样。

配置过程：

• 终端输入 npm install webpack-dev-server -D 安装自动打包工具

• 修改 package.json 中 script 节点下的 dev 命令：

  "scripts": {
       
  	"dev": "webpack-dev-server"
  },
  

• 将 HTML 页面中对 JavaScript 的引用位置改为 /***.js

• 终端输入 npm run dev。

• 浏览器中输入 http://localhost:8080 可以实时预览结果

在输入 http://localhost:8080 之后如果不显示，可以输入 http://localhost:8080/src。

当在 js 文件中更新了内容时，便会重新打包，重新渲染页面。

由于 webpack 存在版本问题，如果在执行时失败，可以下载以下版本

"devDependencies": {
   
  "webpack": "^4.29.0",
  "webpack-cli": "^3.2.1",
  "webpack-dev-server": "^3.1.14"
}

另外，在 html 结构中虽然加载 js 文件不存在，但是在执行 npm run dev 时，会在根目录下生成一个不可见的 js 文件。

配置预览页面

上面配置实现了自动打包，可还是用着别扭，在浏览器输入地址之后，还需要输入 /src ，接下来可以配置输入地址之后直接展示 index.html 页面。

接下来的配置需要使用 html-webpack-plugin 插件，过程如下：

• 终端输入 npm install html-webpack-plugin -D 安装插件

• 修改 webpack.config.js 头部区域，添加配置信息：

  const HtmlWebpackPlugin = require('html-webpack-plugin')
  
  const HtmlPlugin = new HtmlWebpackPlugin({
       
    // 指定文件路径
    template: './src/index.html',
    // 指定生成文件的文件名，该文件存在于内存中
    filename: 'index.html'
  }