webpack的中文文档非常详细，手把手教学，强烈推荐直接阅读文档：https://www.webpackjs.com/guides/
一步步的跟下来就可以学会webpack的基础使用（也就是本文内容）了。

本篇笔记为我在学习过程中的实践结果。

概念

webpack中文网-概念

起步

一个最简单的webpack项目

  1. 进入项目文件夹，npm init -y就会生成一个默认的package.json文件。
  2. 使用cnpm install webpack webpack-cli --save-dev，局部下载webpack和webpack-cli，并且把设置保存到package.json的devDependencies
  1. "devDependencies": {
  2.     "webpack": "^4.35.2",
  3.     "webpack-cli": "^3.3.5"
  4.   }
  1. 建立一个结构为
  1. .
  2. ├── dist
  3. │   ├── index.html
  4. ├── node_modules
  5. ├── package.json
  6. └── src
  7.     └── index.js

的项目文件夹,index.js里可以使用import语法引入特定的包，例如:

  1. import _ from 'lodash'

并且在dist/index.html中使用来引入js文件

  1. 使用npx webpack来使用webpack进行打包。
  2. 打包之后的文件结构如下：
  1. .
  2. ├── dist
  3. │   ├── index.html
  4. │   ├── main.js
  5. ├── node_modules
  6. ├── package.json
  7. └── src
  8.     └── index.js

其中main.js分成两部分，一部分是本来的index.js文件，另一部分是import进来的lodash。

  1. 浏览器打开index.html文件。即为可以正常浏览的文件了。

使用webpack.config.js

  1. 基本设置与以上相同，只是添加一个webpack.config.js文件，与package.json同级，内容为：
  1. const path = require('path');
  3. module.exports = {
  4.     entry: './src/index.js',
  5.     output: {
  6.         filename: 'bundle.js',
  7.         path: path.resolve(__dirname, 'dist')
  8.     }
  9. };
  1. 再运行npx webpack或者npx webpack —config webpack.config.js，即可完成与刚才类似的操作，只不过最后输出的文件名为bundle.js，这是在output中的定义。

使用npm脚本(npm script)进一步简洁操作步骤

  1. 基本结构与之前一样
  2. 在package.json里面的script中加入一行
  1. "build": "webpack"

这时再运行npm run build 就相当于刚才运行的npx webpack了。

  • tips:
  1. 1. npm init -y的意思是项目初始化的所有选项都选择yes，具体的选项包括以下几项，括号内为默认值:
  2.         package name: (source)  // 项目名称，默认为文件夹的名称
  3.         version: (1.0.0)        // 版本
  4.         description:            // 项目描述，默认为空
  5.         entry point: (index.js) //webpack的入口文件
  6.         test command: 
  7.         git repository:
  8.         keywords: 
  9.         author: 
  10.         license: (ISC)
  11. 2. npx 
  12.     npx为npm 5.2版本之上内置的一个命令，可以调用项目内部安装的模块。
  13.     原理为运行的时候会在node_modules/.bin路径以及环境变量$PATH里面检查命令是否存在。
  14.     更加详细的解析，可以参见阮一峰大神的[npx 使用教程](url:http://www.ruanyifeng.com/blog/2019/02/npx.html)

资源管理

  • 资源管理也即是使用不同的loader将各种不同的文件通过import的方式放进js文件中。
  • 配置方式是对webpack.config.js进行添加：
  1. module.exports = {
  2.     entry: './src/index.js',
  3.     output: {
  4.         filename: 'bundle.js',
  5.         path: path.resolve(__dirname, 'dist')
  6.     },
  7.     // 从这里开始是新增的部分
  8.     module: {
  9.         rules: [
  10.             {
  11.                 // 对文件名中包含有.css的文件使用style-loader和css-loader
  12.                 test: /\.css/,
  13.                 use: [
  14.                     'style-loader',
  15.                     'css-loader'
  16.                 ]
  17.             },
  18.             {
  19.                 test: /.png|jpg|gif/,
  20.                 use: [
  21.                     {
  22.                         // file-loader的优化版，设置一个limit值，单位为byte，
  23.                         // 低于这个值的文件会被编译成base64显示。
  24.                         // 高于这个值的文件会默认使用file-loader，编译成正常的类似于
  25.                         // 8143cd94bf00b1b7b8e1c22f7a478495.png 这样的文件
  26.                         loader: "url-loader",
  27.                         options: {
  28.                             limit: 81920000
  29.                         }
  30.                     }
  31.                 ]
  32.             }
  33.         ]
  34.     }
  35. };

管理输出

  • 如果想要把不同的js文件输出为不同的输出文件，那么需要把entry和output换一种写法：
  1. entry: {
  2.         app: './src/index.js',
  3.         print: './src/print.js'
  4.     },
  5.     output: {
  6.         filename: '[name].bundle.js',
  7.         path: path.resolve(__dirname, 'dist')
  8.     },

前面的app和print，可以通过[name]的形式获取到，如果对以上两者进行配置，那么输出的就将会是app.bundle.js和print.bundle.js。

  • 但是html中script的引入文件并没法跟随修改而变化，要解决这个问题，需要引入插件html-webpack-plugin
  1. const HtmlWebpackPlugin = require('html-webpack-plugin');
  3. module.exports = {
  4.     entry: {
  5.         app: './src/index.js',
  6.         print: './src/print.js'
  7.     },
  8.     plugins: [
  9.         // 这里是html-webpack-plugin插件的使用点
  10.         new HtmlWebpackPlugin({
  11.             title: '输出管理'
  12.         })
  13.     ],
  14.     output: {
  15.         filename: '[name].bundle.js',
  16.         path: path.resolve(__dirname, 'dist')
  17.     },
  18. };

使用了html-webpack-plugin之后，输出的index.html的内容变成了

  1. <!DOCTYPE html>
  2. <html>
  3.   <head>
  4.     <meta charset="UTF-8">
  5.     <title>输出管理</title>
  6.   </head>
  7.   <body>
  8.   <script type="text/javascript" src="app.bundle.js"></script><script type="text/javascript" src="print.bundle.js"></script></body>
  9. </html>

不过这里只有单纯的引用，真的是all-in-js了。

  • 辅助必需插件：clean-webpack-plugin
  1. const { CleanWebpackPlugin } = require('clean-webpack-plugin');
  2. .
  3. .
  4. .
  6.     plugins: [
  7.         new CleanWebpackPlugin(),
  8.         ·
  9.         ·
  10.         ·
  11.     ],

这里是插件的官网地址,语法有更改，按照最新的(19.7.3)就是上面的。

这个插件的作用是清理目标文件夹除了输出文件之外，其他多余的文件。

开发辅助

inline-source-map
  1. 可以准确定位到出错的js在源码中的位置，可以看到没有打包之后的源码

webpack —watch
  1. 在package.json里新定义一条命令watch：
  2. "scripts": {
  3.     "watch": "webpack --watch",
  4. },
  5. 再运行npm run watch，就可以对src文件夹里面的文件变动进行监控，如果有变化，就进行实时编译，刷新一下页面就可以看到了。
  6. 这个一般配合下面的插件一起使用，来实现热更新调试的效果。

webpack-dev-server
  1. 虽然说是配合webpack --watch来使用，但是其实webpack-dev-server内置了类似watch的功能。
  2. 1. 使用cnpm install webpack-dev-server --save-dev
  3. 2. 在package.json里新增一条start命令
  4. "scripts": {
  5.     "start": "webpack-dev-server --open",
  6. },
  7. 然后运行npm run start 就可以开启一个本地服务器，并且察觉到源文件有更新，会自动进行编译。
  8. 不过这也有个不是缺点的缺点，编译之后的文件不会出现在dist文件中，需要额外build一下。