一、项目初始化

准备工作

1. Node.js

从 Node.js 官网去下载对应版本
在终端中任意路径输入以下命令查看本机电脑安装的 Node.js 版本：

  1. node -v

2、npm

当我们在电脑中安装好 Node.js 后，同时会自动安装一个 npm 的工具。
在终端中任意路径输入以下命令查看本机电脑安装的 npm 版本：

  1. npm -v

我们可以用 npm 来下载一些项目中需要用到的插件。所以在终端任意路径中执行以下命令，来设置淘宝镜像：

  1. npm config set registry https://registry.npm.taobao.org

设置完成后，后续我们使用 npm 下载插件时就可以直接从淘宝的地址下载，比从外网下载更快。

项目初始化

自己创建一个文件夹，用来作为项目的根目录（也可以直接用 Git 克隆好的仓库目录作为项目根目录）。
在终端中定位到项目根目录，然后执行以下命令来实现项目的初始化：

  1. npm init -y

该命令执行成功后，会在项目根目录中生成一个package.json 文件。该文件中自动记录项目的相关信息，例如：项目名称、项目版本、项目所需插件等。

1、下载 webpack

在终端中定位到项目根目录，执行以下命令，在项目中下载 webpack 的依赖包：

  1. npm i webpack webpack-cli -D

下载成功后，在 package.json 文件中可以看到对应的版本记录：
前端模块化案例 - 图1

二、生产环境和开发环境配置

在一个项目从开发到上线的过程中，我们会将程序分为两个环境：生产环境和开发环境。

  • 开发环境（development）：指的就是我们项目在开发过程中需要做的一些配置，主要是方便开发人员调试代码；

  • 生产环境（production）：指的就是项目的项目在经过测试后无明显异常，准备发布上线的相关配置，主要是优化用户体验；

    创建配置文件

    针对生产环境和开发环境我们需要创建两个不同的配置文件，同时，我们考虑到两个环境之间有很多相同的配置，所以我们可以将这些相同的配置提取出来，放到一个公共的配置文件中。
    所以，我们在项目的根目录中创建三个 webpack 的配置文件：

  • webpack.base.config.js # 公共配置文件

  • webpack.prod.config.js # 生产环境的配置文件
  • webpack.dev.config.js # 开发环境的配置文件

    合并公共配置

    我们将开发环境和生产环境的公共配置提取了出去，但是最终运行的时候，还是需要将公共配置分别合并到开发环境和生产环境中，因此，我们可以借助插件将我们提取出去的代码，再合并回去。

    1、下载插件

    将终端定位到项目根目录，然后执行以下命令下载插件：
    1. npm i webpack-merge -D

    2、添加公共配置

    在 webpack.base.config.js中添加以下代码，作为公共配置的基础代码： ```javascript module.exports = {

}

  1. <a name="ThT18"></a>
  2. #### 3、合并公共配置
  3. 在 `webpack.dev.config.js`和 `webpack.prod.config.js` 中都添加以下配置：
  4. ```javascript
  5. // 引入 webpack-merge 插件，得到一个对象，将该对象的 merge 属性解构出来
  6. const { merge } = require('webpack-merge');
  7. // 引入 base 公共配置
  8. const base = require('./webpack.base.config.js');
  9. // 合并 base 公共配置，同时可以在第二个对象中进行当前环境自己的配置
  10. module.exports = merge(base, {
  12. });

配置环境模式

在 webpack.dev.config.js 中添加以下配置：

  1. module.exports = merge(base, {
  2.     mode: 'development'
  3. })

在 webpack.prod.config.js 中添加以下配置：

  1. module.exports = merge(base, {
  2.     mode: 'production'
  3. })

配置项目启动命令

我们需要通过 webpack 去启动项目，在启动项目的过程中，webpack 会自动根据配置对项目代码进行编译转换等处理，最后编译成浏览器能过够识别的代码，最后在浏览器中打开。

1、启动生产环境

因为 webpack 的启动命令很长，所以考虑到使用方便，我们通常会在 package.json 文件中，将启动命令进行配置命名：

  1. {
  2.     "scripts": {
  3.         "test": "echo \"Error: no test specified\" && exit 1",
  4.         "build": "webpack --config webpack.prod.config.js --mode production"
  5.     }
  6. }

以上代码中，build就是我们给启动命令取的名字，真正的启动命令就是后面的 webpack --config webpack.prod.config.js --mode production
配置完成后，以后只要需要启动生产环境，就在终端中（定位到项目根目录）执行以下命令：

  1. npm run build

2、启动开发环境

在开发环境中，我们需要一边写代码，一边就让 webpack 同步编译代码。所以，我们需要下载开发服务器插件。

下载插件
  1. npm i webpack-dev-server -D

配置开发服务器

在 webpack.dev.config.js 文件中添加开发服务器的配置：

  1. module.exports = merge(base, {
  2.     // ...
  3.     // 开发服务器
  4.     devServer: {
  5.         port: '8080', // 端口号
  6.         // open: 'index.html', // 启动项目时默认打开的页面
  7.     }
  8. })

配置启动命令

找到 package.json 文件，继续对开发环境的启动命令进行命名：

  1. {
  2.   "scripts": {
  3.     "test": "echo \"Error: no test specified\" && exit 1",
  4.       "build": "webpack --config webpack.prod.config.js --mode production",
  5.         "dev": "webpack-dev-server --hot --config webpack.dev.config.js --mode development"
  6.   },
  7. }

以上代码中，dev 就是我们给启动命令取的名字，真正的启动命令就是后面的 webpack-dev-server --hot --config webpack.dev.config.js --mode development
配置完成后，以后只要需要启动开发环境，就在终端中（定位到项目根目录）执行以下命令：

  1. npm run dev

三、搭建项目结构

在项目根目录中创建一个 src 的目录，用来存放所有前端项目的代码，包括 HTML、SCSS、JS、图片等。
后续，我们将项目中所有页面的 .html 文件，都直接放在 src 的根目录中。

  1. src
  2.  |--- static
  3.  |      |--- images
  4.  |      |--- libs       # 第三方的库
  5.  |--- scss
  6.  |--- js
  7.  |    |--- index.js
  8.  |    |--- login.js
  9.  |    |--- register.js
  10.  |--- index.html
  11.  |--- login.html
  12.  |--- register.html
  13.  |--- ...

四、基础配置

所有的基础配置都是在开发环境和生产环境都需要，因此，我们在公共配置文件中进行下列的配置

entry 入口配置

因为每一个 .html文件都需要有一个入口 .js 文件，所以我们需要在 webpack 中将这些入口 .js 文件的名字和路径全都进行配置：

  1. module.exports = {
  2.     entry: {
  3.         index: './src/js/index.js',
  4.         login: './src/js/login.js',
  5.         register: './src/js/register.js'
  6.     }
  7. }

output 出口配置

webpack 在对我们的项目代码进行编译转换后，会得到一个新代码，这个新代码就是我们的出口文件。出口配置，就是要告诉 webpack 新代码的存储名称和存储位置。

  1. // 引入 Node.js 自带的“路径”插件
  2. const path = require('path');
  3. module.exports = {
  4.     // ...
  5.     output: {
  6.         // 将出口文件保存在项目根目录的 dist 目录中
  7.         path: path.resolve(__dirname, 'dist'),    // 出口文件的保存路径
  8.         filename: 'js/[name].js'  // 出口文件的名称
  9.     }
  10. }

配置完成后，可以在终端中运行生产环境命令查看代码打包效果：

  1. npm run build

配置 HTML

webpack 默认只能处理 .js 文件，所以，如果要处理 HTML，需要单独下载插件。

1、下载插件

  1. npm i html-webpack-plugin -D

2、配置

  1. const HtmlWebpackPlugin = require('html-webpack-plugin');
  2. module.exports = {
  3.     // ...
  4.     plugins: [
  5.         new HtmlWebpackPlugin({
  6.             template: './src/index.html', // HTML 文件路径
  7.             filename: 'index.html',       // webpack 编译后的文件名
  8.             chunks: ['index']             // 配置当前 HTML 中引入的 JS 文件的名字
  9.         }),
  10.         new HtmlWebpackPlugin({
  11.             template: './src/login.html', // HTML 文件路径
  12.             filename: 'login.html',       // webpack 编译后的文件名
  13.             chunks: ['login']             // 配置当前 HTML 中引入的 JS 文件的名字
  14.         }),
  15.         new HtmlWebpackPlugin({
  16.             template: './src/register.html', // HTML 文件路径
  17.             filename: 'register.html',       // webpack 编译后的文件名
  18.             chunks: ['register']             // 配置当前 HTML 中引入的 JS 文件的名字
  19.         })
  20.     ]
  21. }

优化 HTML 和 JS 的配置

考虑到当前项目是一个多页面项目，每新建一个页面，我们都需要在 webpack 的配置文件里添加入口 JS 和 HTML 的配置代码，这样太麻烦了。所以，我们用数组来优化处理一下 HTML 和 JS 的配置。

1、创建页面数组

首先，在 webpack.base.config.js 中创建一个数组，用来存放项目中所有的页面名称：

  1. // 配置所有页面的 HTML 和 JS 文件名
  2. const pages = ['index', 'login', 'register'];

注意：在数组里添加配置时，必须先在项目中将对应的 HTML 和 JS 文件创建好。

2、修改入口配置

  1. module.exports = {
  2.     entry: {
  3.         ...pages.reduce(function (value, item) {
  4.           // 第一轮循环结果 {index: './src/js/index.js'}
  5.           // 第二轮循环结果 {index: './src/js/index.js'，login: './src/js/login.js'}
  6.           // 第三轮循环结果 {index: './src/js/index.js'，login: './src/js/login.js'，                                 register: './src/js/register.js'}
  7.             return {
  8.                 ...value, // 将 value 对象身上所有的属性扩展后，添加到 return 的对象中
  9.                 [item]: `./src/js/${item}.js`
  10.             }
  11.         }, {})
  12.     }
  13. }

3、修改 HTML 配置

  1. module.exports = {
  2.     // ...
  3.     plugins: [
  4.         ...pages.map(item => {
  5.             return new HtmlWebpackPlugin({
  6.                 template: `./src/${item}.html`, // HTML 文件路径
  7.                 filename: `${item}.html`,       // webpack 编译后的文件名
  8.                 chunks: [item]                  // 配置当前 HTML 中引入的 JS 文件的名字
  9.             })
  10.         }),
  11.     ]
  12. }

配置 SCSS

1、JS 中引入 SCSS

首先，如果需要使用 webpack 去处理 .scss文件，那么所有的 .scss 文件都应该在页面对应的.js 文件中进行引入。
例如，首页需要引入 index.scss，我们就在 index.js 中添加以下代码：

  1. import '../scss/index.scss';

2、下载插件

执行以下命令下载 SCSS 配置需要的 4 个插件：

  1. npm i node-sass sass-loader css-loader mini-css-extract-plugin -D

如果下载出现报错，通常是因为 node-sass 插件导致的，所以可以先去掉 node-sass，先下载其他 3 个依赖包：

  1. npm i sass-loader css-loader mini-css-extract-plugin -D

然后重新执行以下命令单独下载 node-sass：

  1. npm install node-sass --sass-binary-site=https://npm.taobao.org/mirrors/node-sass -D

3、配置 scss

  1. const MiniCssExtractPlugin = require('mini-css-extract-plugin');
  2. module.exports = {
  3.     // ...
  4.     module: {
  5.         // 配置代码的转换规则
  6.         rules: [
  7.             {
  8.                 test: /\.scss$/i,         // 配置需要进行转换的文件名
  9.                 exclude: /node_modules/,  // 排除 node_modules 中的文件
  10.                 use: [
  11.                     MiniCssExtractPlugin.loader,
  12.                     'css-loader',
  13.                     'sass-loader'
  14.                 ]
  15.             }
  16.         ]
  17.     },
  18.     plugins: [
  19.         // ....
  20.         // 配置 scss 转换成 css 后的存储路径和文件名
  21.         new MiniCssExtractPlugin({
  22.             filename: 'css/[name].css'
  23.         })
  24.     ]
  25. }

五、其他插件配置

一、文件复制

在项目中，有一些文件我们希望 webpack 不要做任何的处理，直接复制到编译后的目录中即可。
通常我们会在项目的 src 中专门创建一个 static 目录，用来存放项目中不需要处理的文件。

1、下载插件

  1. npm i copy-webpack-plugin -D

2、配置插件

  1. const CopyWebpackPlugin = require('copy-webpack-plugin');
  2. module.exports = {
  3.     // ....
  4.     plugins: [
  5.         // ...
  6.         new CopyWebpackPlugin({
  7.             patterns: [
  8.                 // 将 ./src/static 目录复制成 dist 的 ./static
  9.                 { from: './src/static', to: './static' }
  10.             ]
  11.         })
  12.     ]
  13. }

注意：如果 static 目录中没有存放图片等资源，就关闭以上配置，否则没有资源的 static 会报错。

二、全局配置 jQuery

1、下载 jQuery

  1. npm i jquery

2、配置

  1. const Webpack = require('webpack');
  2. module.exports = {
  3.     // ....
  4.     plugins: [
  5.         // ...
  6.         // 全局配置 jquery
  7.         new Webpack.ProvidePlugin({
  8.             '$': 'jquery'
  9.         })
  10.     ]
  11. }

三、配置 source map

由于浏览器运行的都是 webpack 编译后的代码，所以会导致浏览器的报错提示中，代码的位置和我们源代码的位置不一致。所以添加以下配置，是为了让浏览器的报错提示能和我们编写的源代码位置对应。
在 webpack.dev.config.js 中进行配置：

  1. module.exports = merge(base, {   
  2.     // ...
  3.     devtool: 'inline-source-map'
  4. })

六、优化配置

通常项目优化都是在项目需要上线前才进行，所以下列优化配置在生产环境 webpack.prod.config.js进行配置：

一、清除无用文件

1、下载

  1. npm i clean-webpack-plugin -D

2、配置

  1. const { CleanWebpackPlugin } = require('clean-webpack-plugin');
  2. module.exports = merge(base, {
  3.     mode: 'production',
  4.     plugins: [
  5.         new CleanWebpackPlugin()
  6.     ]
  7. });

二、最小化 JS 和 CSS

1、下载

  1. npm i terser-webpack-plugin css-minimizer-webpack-plugin -D

2、配置

  1. const TerserWebpackPlugin = require('terser-webpack-plugin');
  2. const CssMinimizerWebpackPlugin = require('css-minimizer-webpack-plugin');
  3. module.exports = merge(base, {
  4.     // ...
  5.     // 对生产环境进行优化
  6.     optimization: {
  7.         minimize: true,
  8.         // 压缩代码最小化处理
  9.         minimizer: [
  10.             new TerserWebpackPlugin({
  11.               // 禁止生成LICENSE文件
  12.               extractComments: false
  13.             }),
  14.             new CssMinimizerWebpackPlugin()
  15.         ],
  16.     }
  17. });