[Day15] Webpack 入门 - 前端三本柱

Webpack 一开始只认识 JavaScript，当引入其他语言（如：css）撰写的档案时就会出现无法执行的错误，这时候就需要 loader 来解决这个问题，loader 就像是个翻译员一样，让 Webpack 认识不同的档案类型并且执行打包工作。

webpack.config.js 是 Webpack 环境设定的重要档案，在 Day14 里已经学到如何设置 entry（进入点）、output（输出点）、mode（输出模式），今天会在学习让 HTML、CSS 回归的同时，学会 webpack.config.js 的nodule 和 plugins 设定。

1. 二师兄回归－CSS

1. 接续 Day14 的练习，Webpack 专案的进入点是 src/index.js，表示 Webpack 只会对 src 资料夹底下的 index.js 做加工处理，如果要加入 css，就需要用 import 的方式进行，步骤如下：

   • 在 src 资料夹内新增 css 档案，命名为 all.css（名称可自行定义），并加入一些简单的样式语法。

     h1 { color: red;}
     

   • 在 index.js 的上方引入 css 档案。

     import './all.css'
     

2. 完成後执行build会得到错误资讯，表示这时候 Webpack 还无法看懂 css，这时候就要设置 loader 了。

   You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file.

3. 到 Webpack 官方文件搜寻 css-loader 就能找到相关资讯。

   css-loader

• 安装 css-loader 和 style-loader（用来将样式插入html中）

  $ npm i -D css-loader style-loader
  

• 编辑 webpack.config.js，加入模组：

  module.exports = {
    module: {
      rules: [
        {
          // 用正则表示法来处理副档名是 .css 的档案
          test: /\.css$/i,
          use: ["style-loader", "css-loader"],
        },
      ],
    },
  };
  

  程序码插入位置参考图：
  

• 完成上面的设置之後，就能成功执行build。

2. CSS－还我原形

在上个段落中，虽然让 Webpack 可以认识 CSS，但是打包後的 css 会被写在 js 档案里面，如果希望将 css 独立出来就要使用到插件－MiniCssExtractPlugin

1. 安装 MiniCssExtractPlugin

   $ npm i -D mini-css-extract-plugin
   

2. 建立一个来源的 css 档（这边使用上个段落建立的 all.css，可自行更改）

3. 在输入点的 js 档引用这个 css 档（同样套用上个段落的设定）

4. 编辑 webpack.config.js

   // 这行放最上面
   const MiniCssExtractPlugin = require("mini-css-extract-plugin");
   
   module.exports = {
     // 加入插件
     plugins: [new MiniCssExtractPlugin()],
     module: {
       rules: [
         {
           test: /\.css$/i,
           // 这边原本使用的是 style.loader，变更为 MiniCssExtractPlugin.loader
           use: [MiniCssExtractPlugin.loader, "css-loader"],
         },
       ],
     },
   };
   

5. 完成设置後执行build会发现 dist 资料夹内多了 main.css 档案，和 js 档案分开了。

3. 大师兄回归－HTML

完成 css 的设置後，Webpack 并不会生成 html 让我们检视样式效果，这时候可以安装 HtmlWebpackPlugin 这个插件，在每次 build 後就会生成一个 html 档案来引入输出的 js 档。

1. 安装 HtmlWebpackPlugin

   $ npm i -D html-webpack-plugin
   

2. 编辑 webpack.config.js，加入插件：

   // 这行放在最上方
   const HtmlWebpackPlugin = require('html-webpack-plugin');
   ...
   ...
   module.exports = {
     // 这行放在 module.exports 内
     plugins: [new HtmlWebpackPlugin()],
   
     // 注意，plugins属性里面放的是阵列，如果有在上一个段落加入 mini-css-extract-plugin，撰写方式会如同下面
     plugins: [
       new HtmlWebpackPlugin(),
       new MiniCssExtractPlugin()
     ],
   

3. 完成设置後执行build会发现 dist 资料夹内多了 index.html 档案，并且已经引入了输出的 js 档案。

4. HTML－自订原形

在前个段落的 html 是 HtmlWebpackPlugin 自动生成的，除了引用 js 之外没有任何内容，我们可以修改 webpack.config.js，把自己撰写的 HTML 作为样板：

1. 在 src 资料夹里面新增一个 index.html 档案（名称自订）。
2. 修改 webpack.config.js。

   module.exports = {
     // 在 HtmlWebpackPlugin() 里面放入物件，并设置 template 属性为来源档案路径
     plugins: [new HtmlWebpackPlugin({
       template: './src/index.html'
     })],
   };
   

3. 完成上面的设置之後，执行build产生的 index.html 就会套用自己撰写的 html 样板了。

5. 为输出档案添加 Hash

浏览器有快取机制来节省流量、加快载入速度，每次打包输出的档案都相同，即使部署上线了也会因为快取让用户端继续使用旧的版本，我们可以在每次输出的档案添加一串 hash 值，这样用户端在读取网页时读到不同的档名就会下载最新的档案，不会使用快取。

1. HTML - 修改 webpack.config.js 的 output（输出点）

   module.exports = {
     output: {
       path: path.resolve(__dirname, 'dist'),
       // 下方这行加入了 [hash]
       filename: 'bundle.[hash].js',
     },
   };
   

2. CSS - 修改 webpack.config.js 的 html-webpack-plugin 插件设定

   plugins: [
     // 小括弧内加入一个物件来设定输出档名
     new MiniCssExtractPlugin({
       filename: 'main.[hash].css'
     })
   ],
   

3. 再次执行build会发现输出的档案多了一串 hash。（这个设定需要搭配插件来帮忙引入新的档案名称，没有使用插件的话每次 build 完要自己改引用路径，会非常麻烦）

6. 自动清空输出资料夹

完成上个段落的 hash 设置後，因为每次产生的档名都不同，就不会有『覆盖』的行为，多 build 几次後 dist 资料夹里面会变得很乱，可以透过 clean-webpack-plugin 这个套件在每次 build 的时候清理 dist 资料夹。

1. 安装套件

   $ npm i -D clean-webpack-plugin
   

2. 编辑 webpack.config.js

   // 插入最上方
   const { CleanWebpackPlugin } = require('clean-webpack-plugin');
   ...
   // 插入 plugins
      plugins: [
        new CleanWebpackPlugin(),
      ],
   

3. 完成设定後就可以测试成果了。

7. 总结

今天的练习，学到了 webpack.config.js 的两个配置，loader 可以让 Webpack 读懂新的档案格式，plugin 可以让 Webpack 自动化执行特定的操作。