webpack - 学习笔记

webpack 对现在网页工程师几乎是必学技能，在许多框架也看得到它的身影，但是真的要设定时又不知道该如何设定，这篇主要是在记录小弟自己学习的心得，也希望能帮到没接触过的人～

webpack 是虾米？

我们写网页时往往不只是写原生的 html、css、js，还会用到 EJS、Pug、Sass、ES6 等等的预处理器或需要编译的内容，而 webpack 主要就是将这些东西转换成浏览器看得懂的语言，甚至是压缩图片与档案也可透过它完成，是非常方便的工具，那么让我们从头开始建立一个 webpack 吧！

建构 webpack 环境

其实 webpack 的运作相当简单，将其安装且设定好后，只需要不断载入需要的模组即可

npm init

开启新专案输入指令，接着填入相关讯息，不想填那么多也可以直接npm init -y，接着就会创建 package.json 档案，此档案非常重要，共有几个功能

安装 webpack

依照官网安装 webpack 与 webpack-cli，至于这边的 --save 是将套件储存至 package.json，而 -dev 则是开发环境使用的意思

$ npm install webpack webpack-cli --save-dev

webpack.config.js

接下来在根目录创建 webpack.config.js 档案，这是 webpack 的设定档，必要的设定有 entry 与 output，分别是进入点与输出，可依照自己的专案结构做设定

// webpack.config.jsconst path = require('path');// node 中与路径的相关套件module.exports = {  entry: './src/index.js',  // 进入点，所以档案必须与此档案有关联才会被编译  output: {    filename: 'index.bundle.js',    // 编译档案名称    path: path.resolve(__dirname, 'dist')    // 编译档案的位置  }};

关联档案

我们这边建立了一只 js 档案与一只 scss，里面可随意写一些内容，并将其载入我们的进入点，这样执行 webpack 后就会编译这些档案啰，所以我们现在的专案应该长得像下面这样

再来将需要编译的档案载入进入点内

// index.jsimport all from './all.js';import './all.scss';

编译

若全域有安装 webpack 与 webpack-cli 可以直接输入指令来执行，但这边推荐在 package.json 中新增指令，这样后续需要执行时就不用下落落长的指令，再来 webpack 编译时有分为开发版本与正式版本，开发版本只进行转译，正式版本还会将其压缩，另外加上 --watch 即会即时监控档案修改

// package.json"scripts": {  "watch": "webpack --mode=development --watch",  "dev": "webpack --mode=development",  "build": "webpack --mode=production"  // production 版本编译时间较长，因此不建议使用 --watch}

接下来就可以直接在终端机执行指令啰，需要执行 package.json 内的指令可使用 npm run

$ npm run build// 执行 package.json 内的 build 指令$ webpack --mode=production// 若全域有安装亦可直接输入指令

这样基本的 webpack 设定就完成啰，接下来只要将编译完成的档案载入即可

module

webpack 预设只支援低版本的 JavaScript，而 module 主要是让 webpack 可以读懂各种档案，若需要编译其他资源就需要载入对应的模组，这边示範几个简单的模组载入

Babel

Babel主要能将我们高版本的 JavaScript 编译为浏览器可运行的样子

安装套件

$ npm install babel-loader @babel/core @babel/preset-env --save-dev

载入模组

// webpack.config.jsmodule.exports = {  module: {    rules: [      {        test: /\.m?js$/,        exclude: /(node_modules|bower_components)/,        use: {          loader: 'babel-loader',          options: {            presets: ['@babel/preset-env']          }        }      }    ]  }}

Sass

要编译 css 需要使用 css-loader，而要编译 Sass 需要使用 sass-loader，最后使用 style-loader 将其载入到 header 中的 style 中，另外 webpack 预设会将 css 编译成 js 档案哦

安装套件

$ npm install css-loader style-loader --save-dev$ npm install sass-loader node-sass --save-dev

载入模组

// webpack.config.jsmodule.exports = {  module: {    rules: [      // 编译 css 档案设定      {        test: /\.css$/i,        use: ['style-loader', 'css-loader'],      },      // 编译 scss 档案设定      {        test: /\.s[ac]ss$/i,        use: [          'style-loader',          'css-loader',          'sass-loader'        ]      }    ]  }}

optimization

这里主要是载入优化或压缩档案的套件，以下是範例

terser-webpack-plugin

terser-webpack-plugin 可以帮我们压缩 js，根据设定也可去除 console 等等

安装套件

$ npm install terser-webpack-plugin --save-dev

载入模组

// webpack.config.jsconst TerserPlugin = require('terser-webpack-plugin');module.exports = {  optimization: {    minimize: true,    minimizer: [      new TerserPlugin({        extractComments: 'all',        terserOptions: {          compress: {            warnings: false,            drop_console: true,            drop_debugger: true          }        }      })    ]  }}

plugins

顾名思义，所有的插件皆会在这里载入，可以增加本来没有的一些功能

mini-css-extract-plugin

mini-css-extract-plugin可以帮我们压缩 css，并且根据设定另外产生出独立的 css 档案

安装套件

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

载入模组

这边因为要将档案独立出来，所以不需要用到 style-loader，记得要将其拿掉，不然会跳错，要特别注意

// webpack.config.jsconst MiniCssExtractPlugin = require('mini-css-extract-plugin');module.exports = {  plugins: [    new MiniCssExtractPlugin({      filename: '[name].css',      chunkFilename: '[id].css',      ignoreOrder: false    }),  ],  module: {    {      test: /\.s[ac]ss$/i,      use: [        MiniCssExtractPlugin.loader,        'css-loader',        'sass-loader'      ]    }  }}

html-webpack-plugin

html-webpack-plugin，他能编译出 html 档案，搭配其他套件可以使用在产生静态页面上

安装套件

$ npm install html-webpack-plugin --save-dev

载入模组

// webpack.config.jsconst HtmlWebpackPlugin = require('html-webpack-plugin');module.exports = {  plugins: [    new HtmlWebpackPlugin()  ]}

结语

webpack 其实并没有想的那么难，基本设定弄好之后，只要不断载入需要的模组与功能即可，而现在的框架基本上都把必要的东西设定好了，我们也不需要多设定什么，只要能在必要时载入自己所需的套件就可以收工了！