这篇文章咱们将经过一个小小的 Demo 了解 webpack 的基本使用javascript
首先咱们建立一个空目录 Demo，做为项目的根文件夹css
在目录下运行 npm init 命令，初始化文件 package.jsonhtml
> npm init -y # 以默认的方式初始化 package.json 文件
而后，咱们能够经过 NPM 安装 webpackjava
> npm install --save-dev webpack
若是使用的是 webpack 4+ 版本，那么还须要安装 webpack-clinode
> npm install --save-dev webpack-cli
接着，咱们在根目录下建立两个文件夹 dist（用于管理输出文件） 和 src（用于管理资源文件）webpack
src 文件夹放本身写的代码文件，dist 文件夹放打包以后的文件，更准确的说是用于发布的文件web
在 dist 文件夹下建立 index.html 文件，并写上下面的代码shell
<!doctype html>
<html>
<head>
<title>Demo</title>
</head>
<body>
<!-- 这里引用的 main.js 文件会在打包以后生成 -->
<script src="main.js"></script>
</body>
</html>
在 src 文件夹下建立 index.js 文件，并写上下面的代码npm
// 引用 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());
此时，文件夹的目录结构以下json
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 的文本
到目前为止，咱们使用的都是 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 的文本
这证实配置文件已经生效啦
通常 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 便可
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 文件应该能够看到文字变成红色
咱们可使用插件管理输出，这里以 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学习笔记 】