1、入口（entry）和出口（output）

入口（entry）

入口为需要打包文件的路径

在 Webpack 中，没有配置入口情况下，默认打包 ./src/index.js,但你可以通过在 webpack.config.js 中配置 entry 属性，来指定一个（或多个）不同的入口起点。例如：

// webpack.config.js 文件下
module.exports = {
  entry: './path/to/my/entry/file.js',
};

输出（output）

output属性告诉输出它所创建的bundle，以及如何命名这些文件。

主要输出文件的默认值是 ./dist/main.js，其他生成文件默认放置在 ./dist 文件夹中。

配置：

const path = require('path');

module.exports = {
  entry: './path/to/my/entry/file.js',
  output: {
    path: path.resolve(__dirname, 'xxx'), // 改目录为 xxx
    filename: 'xxx.js', // 改文件名 xxx.js
  },
};

2、边开发，边预览

在使用 webpack 做开发时，每次更新代码必须手动 npm run duild ，会很麻烦。使用下面命令可边开发边预览：

// 终端运行
./node_modles/.bin/webpack watch

再新建终端开启 server

// 终端运行
http-server -c-1

上面的命令很长，可以在 package.json 文件中加入配置：

"scripts": {
    "watch":"webpack watch",
  },

直接运行 npm run watch 即可

3、webpack serve

每次都要手动 http-server -c-1 很麻烦，使用 webpack serve

首先安装 webpack server

npm i -D webpack-dev-server@4.11.1

把 webpack.config.js 中，mode: 'production',改为mode: 'development',

./node_modules/.bin/webpack serve --open // --open 直接打开浏览器

但是这样浏览器会报错

需要装 webpack 插件 html-webpack-plugin

npm i -D html-webpack-plugin@5.5.0

这个插件会自动帮我们生成 index.html 文件，所以原来的 index.html 文件可以直接删除，然后webpack.config.js 文件中写入

const path = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin')

module.exports = {
  mode: 'development',
  plugins: [
    new HtmlWebpackPlugin({
      title: '开发模式',
    }),
  ],
}

再次运行./node_modules/.bin/webpack serve --open 即可

webpack serve --open 做了哪些事

watch：监听文件变化
build：文件以改变就重新打包
server：启动开启 http server
open：自动打开浏览器页面

4、在页面中显示 Hello Word

由于上面的 index.html 文件是，webpack 自动帮我们生成的，无法在上面加内容，所以我们可以使用自己的模板。

在 webpack.config.js 中加入：

plugins: [
  new HtmlWebpackPlugin({
    title: '开发模式',
    template: 'index.html' // 需要应用的模板
  })
]

创建 index.html 文件

<!DOCTYPE html>
<html lang="zh">
  <head>
    <meta charset="utf-8" />
    <title><%= htmlWebpackPlugin.options.title %></title>
  </head>
  <body>
    <div>Hello Word</div>
  </body>
</html>

当我们修改 src 外面的文件内容时，需要重新启动 server，页面中就能成功显示 Hello Word

但是 index.html 中没有写 <script></script> 标签，我们的打包的 js 文件怎么读取呢？

只要是通过 webpack 配置的，webpack 会自动帮我们加。

5、打包时一定要将 `mode` 必须为 `mode: 'production',`，不然打包出来的代码会加很多注释，体积会很大

6、开发时，运行`./node_modules/.bin/webpack serve --open`，build 了吗

答案是：build 了，但是 webpack 会将 build 的 dist 目录中的文件，存放在内存中，不会生成 dist 目录，减少 server 时间。

7、安装依赖

如果是开发时才会用的，就用命令npm i -D xxx@x.x.x
如果是用户浏览器上用的，就用命令 npm i xxx@x.x.x

8、引入 style.css

安装 style loader 和 css loader

npm install --save-dev style-loader 
//将模块导出的内容作为样式并添加到 DOM 中
npm install --save-dev css-loader 
// 加载 CSS 文件并解析 import 的 CSS 文件，最终返回 CSS 代码

js 文件中使用

import './style.css'

做了哪些事：

css => js string
生成 style 标签
js string 放入 style 标签中

9、单独打包 css

loader 只是将 css 转换为 js 代码，不能做到单独将 css 打包，所以需要用到 plugins 。

MiniCssExtractPlugin

本插件会将 CSS 提取到单独的文件中，为每个包含 CSS 的 JS 文件创建一个 CSS 文件，并且支持 CSS 和 SourceMaps 的按需加载。

安装 MiniCssExtractPlugin

npm install --save-dev mini-css-extract-plugin

webpack.config.js 配置

const MiniCssExtractPlugin = require("mini-css-extract-plugin");

module.exports = {
  plugins: [new MiniCssExtractPlugin()],
  module: {
    rules: [
      {
        test: /.css$/i,
        use: [MiniCssExtractPlugin.loader, "css-loader"], 
        // 需要将上面的 'style-loader' 删掉
      },
    ],
  },
};

打包 npm run build

会将所有的 css 文件打包成一个 css 文件

10、引入图片

安装 file loader

npm install file-loader --save-dev

js 文件中引入

import img from './file.png';

webpack.config.js 配置

module.exports = {
  module: {
    rules: [
      {
        test: /.(png|jpe?g|gif)$/i,
        use: [
          {
            loader: 'file-loader',
          },
        ],
      },
    ],
  },
};

11、按需记载模块

在点击按钮后才会加载 a.js 文件

const button = document.getElementById('button')
button.addEventListener('click', () => {
  import('./a.js').then((module) => console.log(module.a))
})

打包后会生成另一个 js 文件

12、总结

局部安装要用的 script 或 npx，全局安装直接用但不推荐
开发模式 mode 为 development，用 server，文件可以不打包无后缀
生产模式 mode 为 production，用 build，文件必打包必加后缀
其他不懂的就去看文档/Github
有新的任务，不会就去上网搜

Wepback 入门