webpack
作用：是一个模块打包器，将有依赖关系的资源经过 webpack 打包处理成独立的静态资源
概念
入口(entry)
指示 webpack 应该使用哪个模块，来作为构建其内部依赖关系的开始
默认值是 ./src/index.js
输出(output，出口)
告诉 webpack 在哪里输出它所创建的 bundle，以及如何命名这些文件。主要输出文件的默认值是 ./dist/main.js，其他生成文件默认放置在 ./dist 文件夹中。
loader
webpack 只能理解 JavaScript 和 JSON 文件，这是 webpack 开箱可用的自带能力。loader 让 webpack 能够去处理其他类型的文件
插件(plugin)
loader 用于转换某些类型的模块，而插件则可以用于执行范围更广的任务。
模式(mode)
- development - 开发模式
- production - 生产模式
- none
使用
安装
创建 package.json 文件：
$ npm init -y
安装 webpack 及 webpack-cli：
$ npm i webpack-cli webpack --save-dev
创建目录结构
webpack-demo
|- package.json
|- index.html
|- /src
|- index.js
index.html：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>起步</title>
<script src="https://unpkg.com/[email protected]"></script>
</head>
<body>
<script src="./src/index.js"></script>
</body>
</html>
index.js：
function component() {
const element = document.createElement('div');
// lodash（目前通过一个 script 引入）对于执行这一行是必需的
element.innerHTML = _.join(['Hello', 'webpack'], ' ');
return element;
}
document.body.appendChild(component());
创建一个 bundle
稍作修改目录结构：
webpack-demo
|- package.json
+ |- /dist
+ |- index.html
- |- index.html
|- /src
|- index.js
Tip
修改文件内容：
index.js：
+import _ from 'lodash';
+
function component() {
const element = document.createElement('div');
- // lodash（目前通过一个 script 引入）对于执行这一行是必需的
+ // lodash 在当前 script 中使用 import 引入
element.innerHTML = _.join(['Hello', 'webpack'], ' ');
return element;
}
document.body.appendChild(component());
在此 import 了 lodash 库，所以需要安装该库：
$ npm i lodash
index.html：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>起步</title>
- <script src="https://unpkg.com/[email protected]"></script>
</head>
<body>
- <script src="./src/index.js"></script>
+ <script src="main.js"></script>
</body>
</html>
在 dist 目录下没有 main.js 文件，该文件需要经过 webpack 处理后动态构建，利用如下命令来创建 main.js 命令：
$ npx webpack
打包后命令行提示类似如下结果：
asset main.js 69.5 KiB [emitted] [minimized] (name: main) 1 related asset
runtime modules 1010 bytes 5 modules
cacheable modules 532 KiB
./src/index.js 272 bytes [built] [code generated]
./node_modules/lodash/lodash.js 531 KiB [built] [code generated]
WARNING in configuration
The 'mode' option has not been set, webpack will fallback to 'production' for this value.
Set 'mode' option to 'development' or 'production' to enable defaults for each environment.
You can also set it to 'none' to disable any default behavior. Learn more: https://webpack.js.org/configuration/mode/
webpack 5.52.0 compiled with 1 warning in 4943 ms
配置文件
在项目根目录下创建 webpack.config.js 文件：
module.exports = {
mode: 'development', // 模式
entry: './src/main.js', // 入口
output: {
// 输出
path: __dirname + '/dist', // 输出文件所在的目录
filename: 'js/app.[chunkhash].js' // 主输出文件名
}
}
在命令行下提示 npx webpack 会默认到项目根目录下查找 webpack.config.js 配置命令执行构建。
插件
- html-webpack-plugin
$ npm i --save-dev html-webpack-plugin
修改配置文件：
const HTMLWebpackPlugin = require('html-webpack-plugin')
module.exports = {
mode: 'development', // 模式
entry: './src/main.js', // 入口
output: {
// 输出
path: __dirname + '/dist', // 输出文件所在的目录
filename: 'js/app.[chunkhash:8].js' // 主输出文件名
},
plugins: [ // 插件
new HTMLWebpackPlugin({
template: __dirname + '/public/index.html',
filename: 'index.html'
})
]
}
loader
- style-loader、css-loader
$ npm i style-loader css-loader --save-dev
css-loader 用于识别 css 资源，style-loader 是在 <head> 中添加 <style> 节点来显示 css 资源
修改配置：
const HTMLWebpackPlugin = require('html-webpack-plugin')
module.exports = {
mode: 'development', // 模式
entry: './src/main.js', // 入口
output: {
// 输出
path: __dirname + '/dist', // 输出文件所在的目录
filename: 'js/app.[chunkhash:8].js' // 主输出文件名
},
plugins: [ // 插件
new HTMLWebpackPlugin({
template: __dirname + '/public/index.html',
filename: 'index.html'
})
],
module: {
rules: [
{
test: /\.css$/i,
use: ['style-loader', 'css-loader'],
},
],
}
}
- sass-loader、node-sass：主要用于编译 SCSS 文件
$ npm i sass-loader node-sass -D
- less-loader、less：主要用于编译 less 文件
- file-loader：文件处理(如复制)
- url-loader：文件（包括媒体资源）处理，与 file-loader 类似，可以在资源小于指定大小时生成 base64 格式数据
- vue-loader：主要是用于在 webpack 中处理
*.vue单文件组件
多页应用相关配置
const path = require('path')
const HTMLWebpackPlugin = require('html-webpack-plugin')
module.exports = {
mode: 'development',
entry: {
'js/login': './src/js/login.js',
'js/detail': './src/js/detail.js'
},
output: {
path: path.join(__dirname, '../dist'),
filename: '[name].[chunkhash:8].js'
},
plugins: [
new HTMLWebpackPlugin({
template: './public/html/login.html',
filename: 'html/login.html',
chunks: ['js/login']
}),
new HTMLWebpackPlugin({
template: './public/html/detail.html',
filename: 'html/detail.html',
chunks: ['js/detail']
}),
]
}
webpack-dev-server
在开发模式下启动开发服务器，编写 npm scripts：
{
"scripts": {
"dev": "webpack serve --config config/webpack.conf.dev.js",
"build": "webpack --config config/webpack.conf.prod.js"
},
}