这篇文章我们将通过一个小小的 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.binwebpack`
之后，我们应该可以看到在 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，是不是瞬间变得清爽起来呢
【 阅读更多 webpack 系列文章，请看 webpack学习笔记 】