webpack 学习

准备

• 新建 webpack-test 文件夹
  • 目录
    • src
      • hello.js
        • export const hello= 'hello'
      • main.js
        • import { hello } from './hello.js' console.log(hello + ' world')
    • webpack.config.js
    • package.json

打包 js 文件

• 安装 webpack、webpack-cli

  • npm i -D webpack webpack-cli

  • 在 webpack.config.js 中输入下面代码

    module.exports = {
        entry: { // 入口文件
            main: './src/main.js'
        },
        output: { // 出口文件
            path: __dirname + '/dist'
        }
    }

• 在 package.json 文件中编写命令行执行代码

  • "scripts": { "build": "webpack" }

• 终端输入：npm run build

• 生成 dist 文件夹，里面有一个 main.js 文件，这个文件就是打包的 js 文件

  • 新建 index.html，导入打包的js文件：<script src='./main.js'></script>

entry 字段讲解

现在的目录是这样的：

• config
  • client.config.js
• src
  • client
    • index.js
• package-lock.json
• package.json

现在我需要在 client.config.js 中配置打包信息，其中遇到一个 entry 路径问题。

我写的是 ../src/client/index.js，报路径错误。

后面改为 ./src/client/index.js 就可以了。

查找了原因：

• config 目录和 src 目录是同级的，为什么 entry 是 ./ 而不是 ../？
• 因为 webpack 的 entry 是相对于配置文件的 webpack.config.js
• webpack 配置文件中的 entry 字段是相对于项目根目录的路径，而不是相对于配置文件本身
• 因此，无论配置文件在哪个目录下，entry 都应该是相对于项目根目录的路径。
• 所以这里的 ./src/client/index.js 是相对于项目根目录的路径。

html 文件自动引入打包文件

• 安装插件：npm i -D html-webpack-plugin，这个插件会自动生成 HTML 文件，并将打包后的 JavaScript 和 CSS 文件自动插入到 HTML 中。

• 新建 public 文件夹 和 index.html 文件，作为插件的模板 html 文件

• 修改 webpack.config.js 代码：

  const HtmlWebpackPlugin = require('html-webpack-plugin') // 自动生成 HTML 文件的插件
  
  module.exports = {
      entry: { // 入口文件
          main: './src/main.js'
      },
      output: { // 出口文件
          path: __dirname + '/dist'
      },
      plugins: [
          new HtmlWebpackPlugin({
              template: './public/index.html' // 作为生成 HTML 文件的模板文件
          })
      ]
  }

• 修改 src/main.js 文件内容：import { hello } from './hello.js' console.log(hello + ' world!!!')

• 终端输入：npm run build

• 可以看到在 dist 文件夹中会自动生成 index.html

index.html 使用模板插件提供的 title

• 可以在 HtmlWebpackPlugin 中定义 title 信息

  const HtmlWebpackPlugin = require('html-webpack-plugin') // 自动生成 HTML 文件的插件
  
  module.exports = {
      entry: { // 入口文件
          main: './src/main.js'
      },
      output: { // 出口文件
          path: __dirname + '/dist'
      },
      plugins: [
          new HtmlWebpackPlugin({
              template: './public/index.html', // 作为生成 HTML 文件的模板文件
              title: 'webpack-test'
          })
      ]
  }

• 修改 public/index.html 的 title 标签内容：<title><%= htmlWebpackPlugin.options.title %></title>

• 终端输入：npm run build

• 可以在浏览器中看到标签页的 title 信息已经生效了，显示的：“webpack-test”

清除 dist 目录中的旧文件

• 安装插件：npm i -D clean-webpack-plugin，此插件在每次打包前清除输出目录中的旧文件。避免打包后的旧文件残留在输出目录中，导致构建过程中的文件混乱或冗余。保持输出目录的整洁。

• 修改 dist 文件夹中的 index.html 文件名为 index111.html

• 修改 webpack.config.js

  const HtmlWebpackPlugin = require('html-webpack-plugin') // 自动生成 HTML 文件的插件
  const { CleanWebpackPlugin } = require('clean-webpack-plugin') // 打包前清除输出目录中的旧文件
  
  module.exports = {
      entry: { // 入口文件
          main: './src/main.js'
      },
      output: { // 出口文件
          path: __dirname + '/dist'
      },
      plugins: [
          new HtmlWebpackPlugin({
              template: './public/index.html' // 作为生成 HTML 文件的模板文件
          }),
          new CleanWebpackPlugin()
      ]
  }

• 终端输入：npm run build

• 可以看到 dist 文件夹中的 index111.html 被删除，从新出现 index.html 文件。

配置 webpack 的 web 服务环境

• 此时的 webpack 是没有 web 服务环境的，可以使用 webpack-dev-server 模块来启动 web 服务
• 安装：npm i -D webpack-dev-server
• 修改 package.json 中的 script 脚本，添加 "serve": "webpack-dev-server"
• 终端输入：npm run serve，就可以启动一个运行在 80 端口的服务了
• 此时的项目具有热更新，修改代码后不需要重新在终端进行启动

配置 sourcemap

• sourcemap 启动映射文件，可以通过浏览器查找原始的文件，这样对调试是非常有帮助的。
• 比如我们现在在 main.js 中输入一个错误代码，console.log(a)，a 是不存在的，肯定会报错。
• 
• 上面可以看到报错信息指向的是打包后的文件，对于我们调试来说很麻烦。
• 可以使用 sourcemap 来映射文件，帮助我们更好的找到错误的位置。
• 在 webpack.config.js 文件中添加如下代码：devtool: 'inline-source-map'
• 修改了 webpack.config.js 文件后记得重新启动项目：npm run serve
• 

css 模块化

• 安装 css-loader 和 style-loader 来支持 css 模块化
• 命令：npm i -D css-loader style-loader
• 在 webpack.config.js 中添加下面代码

  module: {
      rules: [
          {
              test: /\.css$/i,
              use: ['style-loader', 'css-loader'] // 从右至左依次执行
          }
      ]
  }

• 终端输入：npm run serve
• 去控制台查看 Elements 选项能够发现 body 类上加入了 * { margin: 0; padding: 0; } 代码。

图片模块化

• 如果想让 webpack 支持图片模块化也需要相应的 loader，不过最新版本的 webpack 已经内置了对图片的处理。
• 只需要配置好信息即可实现对图片的模块化处理。
• 修改 webpack.config.js 代码

  module: {
      rules: [
          {
              test: /\.(png|gif|jpg|jpeg)/i,
              type: 'asset/resource'
          }
      ]
  }

• public/index.html 添加 img：<img src="" alt="">
• main.js 添加：

  import img from './assets/01.png'
  
  const imgDom = document.querySelector('img')
  imgDom.src = img

• 终端输入：npm run serve

处理单文件 .vue 文件

• 安装：npm i -D vue vue-template-complier vue-loader
  • vue – 让 vue 功能生效
  • vue-template-complier – 支持单文件组件
  • vue-loader – 把单文件组件进行转换
• webpack.config.js 文件添加下面代码

  const { VueLoaderPlugin } = require('vue-loader')
  
  module.exports = {
    module: {
        rules: [
            {
                test: /\.vue$/i,
                loader: 'vue-loader'
            }
        ]
    },
    plugins: [
        new VueLoaderPlugin()
    ]
  }

• 新建 src/App.vue 文件

  <template>
      <div class="greet" @click="clickHandler">{{ msg }}</div>
  </template>
  
  <script>
      export default {
          data() {
              return {
                  msg: 'Hello World'
              }
          },
          methods: {
              clickHandler() {
                  alert('Hi Vue')
              }
          }
      }
  </script>
  
  <style scoped>
      .greet {
          background-color: skyblue;
      }
  </style>

• src/main.js 文件新增下面代码

  import { createApp } from 'vue'
  import App from './App.vue'
  
  createApp(App).mount('#app')

• pulic/index.html 新增下面代码：<div id="app"></div>
• 终端输入：npm run serve，可以看到页面显示 “hello word”，并且背景为天蓝色。