一. 起步
1. 使用配置文件
|- /dist
|- index.html
|- /src
|- index.js
|- webpack.config.js
const path = require('path');
module.exports = {
entry: './src/index.js',
output: {
filename: 'bundle.js',
path: path.resolve(__dirname, 'dist');
},
};
2. 使用 NPM Scripts
{
"scripts": {
"build": "webpack --config webpack.config.js"
},
}
二. 管理资源
- 为了使 webpack 能够打包处理除了 JavaScript 的其他类型文件（.css, .jpg, .ts, ...），需要使用 Loader 来做中间处理
- 首先应当先安装对应的 Loader
// 处理 CSS
npm install --save-dev style-loader css-loader
// 处理图片（png|svg|jpg|gif）
npm install --save-dev file-loader
- 对 webpack.config.js 的相应配置
module: {
rules: [{
test: /\.css$/,
use: ['style-loader', 'css-loader'],
}],
},
- webpack 会分析文件的类型并用正则去匹配，找到对应的配置，并使用指定的一个或多个 Loader 进行流式解析
- 在适当的情况下，可以将模块与资源分离到同一目录中并进行封装，在某些场合下，这样使你的组件/模块更具备可移植性，统一的放置资源会造成强烈的耦合，然而并没有一成不变的配置方式，最好的永远是最适合自己项目应用场景的
三. 管理输出
- 当输出文件涉及到 hash 文件名时，没办法在根 index.html 中固定的指定 src，然而可以使用 HtmlWebpackPlugin 来解决这个问题
- 当使用自动的生成构建时，目标文件夹可能存在曾经的遗留文件，因为文件的名称存在 hash，所以并不会替代掉旧的文件，可以使用 CleanWebpackPlugin 插件来清空 dist 文件夹
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const CleanWebpackPlugin = require('clean-webpack-plugin');
module.exports = {
entry: './src/index.js',
output: {
filename: '[name].[hash:8].js',
path: path.resolve(__dirname, 'dist'),
},
plugins: [
new CleanWebpackPlugin(['dist']),
new HtmlWebpackPlugin({ title: 'Hello Webpack!' }),
],
};
四. 开发
1. 使用 Source Map
// webpack.config.js
devtool: 'inline-source-map',
2. 使用 webpack-dev-server
- 需要安装
webpack-dev-server 插件
npm install webpack-dev-server --save-dev
- 配置
webpack.config.js 在 localhost:8080 下建立服务，并将 dist 目录下的文件，作为可访问文件
devServer: {
contentBase: './dist',
},
- 使用
webpack-dev-server --open 命令运行开发服务器
3. 使用 webpack-dev-middleware
- webpack-dev-middle 将 webpack 处理的文件发送到服务器的包装器，它在 webpack-dev-server 内部使用，但它可以作为单独的包引用，以允许更多的自定义设置，通常将其和服务器相结合来使用
- 首先安装 express 和 webpack-dev-middleware
npm install express webpack-dev-middleware --save-dev
- 修改 webpack.config.js 的 publicPath
output: {
//...
publicPath: '/',
},
const express = require('express');
const webpack = require('webpack');
const webpackDevMiddleware = require('webpack-dev-middleware');
const app = express();
const config = require('./webpack.config.js');
const compiler = webpack(config);
app.use(webpackDevMiddleware(compiler, {
publicPath: config.output.publicPath
}));
app.listen(3000);
- 使用 node server.js 来运行服务器，启动浏览器并进入 http://localhost:3000 来访问，当源码的内容发生变化时，webpack-dev-middleware 会检测到变化并将其在内存中写入更新，但这并不会导致浏览器的自动刷新，必须手动刷新才会让浏览器感受到本次的变化，而并不需要重新启动服务器
4. 使用 HMR
const webpack = require('webpack');
devServer: {
contentBase: './dist',
hot: true,
},
plugins: [new webpack.HotModuleReplacementPlugin()],
