这篇文章我们将通过一个小小的 Demo 了解 webpack 的基本使用
1、入门
首先我们创建一个空目录 Demo，作为项目的根文件夹
在目录下运行 npm init 命令，初始化文件 package.json
> npm init -y # 以默认的方式初始化 package.json 文件
然后，我们可以通过 NPM 安装 webpack
> npm install --save-dev webpack
如果使用的是 webpack 4+ 版本，那么还需要安装 webpack-cli
> npm install --save-dev webpack-cli
接着，我们在根目录下创建两个文件夹 dist（用于管理输出文件） 和 src（用于管理资源文件）
src 文件夹放自己写的代码文件，dist 文件夹放打包之后的文件，更准确的说是用于发布的文件
在 dist 文件夹下创建 index.html 文件，并写上下面的代码
<!doctype html> <html> <head> <title>Demo</title> </head> <body> <!-- 这里引用的 main.js 文件会在打包之后生成 --> <script src="main.js"></script> </body> </html>
在 src 文件夹下创建 index.js 文件，并写上下面的代码
// 引用 lodash 模块，webpack 会将其一起打包 // 由于 lodash 是一个外部模块，所以使用之前要先安装：npm install --save lodash import _ from 'lodash'; function component() { var element = document.createElement('div'); element.innerHTML = _.join(['Hello', 'webpack'], ' '); return element; } document.body.appendChild(component());
此时，文件夹的目录结构如下
Demo - package.json - package-lock.json + node_modules + src - index.js + dist - index.html
好，这时我们运行 webpack 打包文件，它将 /src/index.js 打包后输出到 /dist/main.js
> npx webpack > # 或者直接运行 webpack 的二进制文件 `./node_modules/.bin/webpack` > # windows 下运行 webpack 的二进制文件 `node_modules\.bin\webpack`
之后，我们应该可以看到在 dist 目录下生成了一个 main.js 文件
然后，用浏览器打开 dist 目录下的 index.html 文件应该可以看到 Hello webpack 的文本
2、配置文件
到目前为止，我们使用的都是 webpack 的默认配置，比如说入口文件和输出文件
如果想要更丰富的自定义配置，那么我们也可以自己写一个配置文件 webpack.config.js
这样 webpack 会自动读取，现在整个项目的文件结构如下
Demo - package.json - package-lock.json - webpack.config.js + node_modules + src - index.js + dist - index.html
然后我们在 webpack.config.js 文件中写下配置
const path = require('path'); module.exports = { // 入口文件 entry: './src/index.js', // 输出文件 output: { filename: 'bundle.js', // 这里我们将输出文件命名为 bundle.js path: path.resolve(__dirname, 'dist') } };
因为打包后输出的文件名改变了，所以我们还要去 /dist/index.html 改一下引用的文件名
<!doctype html> <html> <head> <title>Demo</title> </head> <body> <!-- 将引用的文件改为 bundle.js --> <script src="bundle.js"></script> </body> </html>
最后，我们再用 webpack 进行打包，并使用指定的配置文件
> npx webpack --config webpack.config.js
可以看到，运行命令之后会在 dist 目录下生成一个 bundle.js 文件
同样，用浏览器打开 dist 目录下的 index.html 文件应该可以看到 Hello webpack 的文本
这证明配置文件已经生效啦
3、NPM 命令
一般 webpack 的启动命令都会附加多个参数，所以每次构建的时候都要输入很长的一串命令
这也太麻烦了一些，所以我们可以在 package.json 文件的 script 中添加一个 build 命令
{ "name": "Demo", "version": "1.0.0", "description": "", "main": "index.js", "scripts": { "test": "echo \"Error: no test specified\" && exit 1", "build": "webpack --config webpack.config.js" }, "keywords": [], "author": "", "license": "ISC", "devDependencies": { "webpack": "^4.39.2", "webpack-cli": "^3.3.7" }, "dependencies": { "lodash": "^4.17.15" } }
然后，当需要运行构建命令的时候，直接输入命令 npm run build 即可
4、管理资源
webpack 虽然只能理解 JavaScript 模块，但是通过 loader 也能引入其它类型的文件
下面我们以引入 CSS 文件为例，处理 CSS，我们需要使用 style-loader 和 css-loader
> npm install --save-dev style-loader css-loader
然后在配置文件 webpack.config.js 中指定处理规则
const path = require('path'); module.exports = { entry: './src/index.js', output: { filename: 'bundle.js', path: path.resolve(__dirname, 'dist') }, module: { rules: [ { // 指定需要处理的文件 test: /\.css$/, // 指定需要使用的 loader use: [ 'style-loader', 'css-loader' ] } ] } };
好，然后我们可以开始写样式文件啦，目录结构如下
Demo - package.json - package-lock.json - webpack.config.js + node_modules + src - index.js - index.css + dist - index.html
index.css 文件的内容如下
.hello { color: red; }
然后在 index.js 文件中引入 index.css（作为一个模块引入）
import _ from 'lodash'; // 引入 CSS 文件 import './index.css'; function component() { var element = document.createElement('div'); element.innerHTML = _.join(['Hello', 'webpack'], ' '); element.classList.add('hello'); // 添加样式 return element; } document.body.appendChild(component());
最后运行构建命令 npm run build 打包项目
这时，在浏览器打开 /dist/index.html 文件应该可以看到文字变成红色
5、管理输出
我们可以使用插件管理输出，这里以 clean-webpack-plugin 插件为例
还记得我们在还没创建 webpack.config.js 文件之前，打包之后默认的输出文件是 main.js
此后，这个文件就一直残留在 /dist 目录（假设没有手动删除的话），这样其实是十分不科学的
所以我们可以使用 clean-webpack-plugin 插件，在重新打包之后把不需要用到的文件自动清除
首先我们来安装插件
> npm install --save-dev clean-webpack-plugin
然后在 webpack.config.js 文件中进行配置
const path = require('path'); // 引入插件，注意引入 CleanWebpackPlugin 插件需要用到解构语法 const { CleanWebpackPlugin } = require('clean-webpack-plugin'); module.exports = { entry: './src/index.js', output: { filename: 'bundle.js', path: path.resolve(__dirname, 'dist') }, module: { rules: [ { test: /\.css$/, use: [ 'style-loader', 'css-loader' ] } ] }, // 使用插件 plugins: [ // 删除 output.path 指定目录中的所有文件，然后重新构建打包 new CleanWebpackPlugin({ // 指定删除的文件和不被删除的文件，使用 ! 指定不被删除的文件 cleanOnceBeforeBuildPatterns: ['*.js', '!index.html'] }) ] };
好，这时候重新运行构建命令
> npm run build
你会发现 dist 文件夹中只剩下两个文件，分别是 index.html 和 bundle.js，是不是瞬间变得清爽起来呢
