概念
webpack概念请移步阅读官网
loader解析不同文件类型
解析txt
module: {
rules: [
{
test: /\.txt$/,
use: 'raw-loader'
}
}
解析es6和react jsx
module: {
rules: [
{
test: /\.js$/,
use: 'babel-loader'
},
}
babel的配置⽂件是:.babelrc,需要安装的依赖如下
- @babel/core
- @babel/preset-env
- babel-loader
支持react react-dom,需要安装的依赖如下
- react
- react-dom
- @babel/preset-react
// .babelrc文件
{
"presets": [
"@babel/preset-env",
"@babel/preset-react"
]
}
解析css、less
- css-loader ⽤于加载 .css ⽂件,并且转换成 commonjs 对象
- style-loader 将样式通过 <style>标签插⼊到 head 中
module: {
rules: [
{
test: /\.css$/,
use: ['style-loader', 'css-loader']
},
{
test: /\.less$/,
use: ['style-loader', 'css-loader', 'less-loader']
}
]
}
解析图片和字体
- url-loader内部也是由file-loader实现的,不超过limit限制的大小,会将其转化为base64格式
module: {
rules: [
{
test: /\.(png|svg|jpg|gif)$/,
use: [
{
loader: 'url-loader',
options: {
limit: 10240,
}
}
]
},
{
test: /\.(woff|woff2|eot|ttf|otf)$/,
use: ['file-loader']
}
]
}
文件指纹策略
- Hash:和整个项⽬的构建相关,只要项⽬⽂件有修改,整个项⽬构建的 hash 值就会更改
- Chunkhash:和 webpack 打包的 chunk 有关,不同的 entry 会⽣成不同的 chunkhash值
- Contenthash:根据⽂件内容来定义 hash ,⽂件内容不变,则 contenthash 不变
那为什么要使用文件指纹策略呢?我认为最重要的是缓存,通过文件指纹可以判断文件是否被修改,如果文件没有被修改,则可以使用浏览器缓存。
分析了原因,那就需要根据实际情况选择选择不同的文件策略
- 多页面应用的情境下,不能因为A页面的js发生了改变,而导致B页面的js也要跟着改变。所以使用chunkhash比较合适
- 只有js修改的情况下,css没有进行修改,那么css文件使用contenthash是比较合适的(css需要抽离出来)
const path = require('path');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
module.exports = {
entry: {
index: './src/index.js',
search: './src/search.js'
},
output: {
path: path.join(__dirname, 'dist'),
filename: '[name]_[chunkhash:8].js'
},
mode: 'production',
module: {
rules: [
{
test: /.js$/,
use: 'babel-loader'
},
{
test: /.css$/,
use: [
MiniCssExtractPlugin.loader,
'css-loader'
]
},
{
test: /.less$/,
use: [
MiniCssExtractPlugin.loader,
'css-loader',
'less-loader'
]
},
{
test: /.(png|jpg|gif|jpeg)$/,
use: [
{
loader: 'file-loader',
options: {
name: '[name]_[hash:8].[ext]'
}
}
]
},
{
test: /.(woff|woff2|eot|ttf|otf)$/,
use: [
{
loader: 'file-loader',
options: {
name: '[name]_[hash:8][ext]'
}
}
]
}
]
},
plugins: [
new MiniCssExtractPlugin({
filename: '[name]_[contenthash:8].css'
})
]
};
压缩文件
css、html、js压缩
- css使用插件optimize-css-assets-webpack-plugin进行压缩
- html使用html-webpack-plugin压缩
- mode为production时,内置了 uglifyjs-webpack-plugin,js会自行压缩
const path = require('path');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const OptimizeCSSAssetsPlugin = require('optimize-css-assets-webpack-plugin');
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
entry: {
index: './src/index.js',
search: './src/search.js'
},
output: {
path: path.join(__dirname, 'dist'),
filename: '[name]_[chunkhash:8].js'
},
mode: 'production',
module: {
rules: [
{
test: /.js$/,
use: 'babel-loader'
},
{
test: /.css$/,
use: [
MiniCssExtractPlugin.loader,
'css-loader'
]
},
{
test: /.less$/,
use: [
MiniCssExtractPlugin.loader,
'css-loader',
'less-loader'
]
},
{
test: /.(png|jpg|gif|jpeg)$/,
use: [
{
loader: 'file-loader',
options: {
name: '[name]_[hash:8].[ext]'
}
}
]
},
{
test: /.(woff|woff2|eot|ttf|otf)$/,
use: [
{
loader: 'file-loader',
options: {
name: '[name]_[hash:8][ext]'
}
}
]
}
]
},
plugins: [
new MiniCssExtractPlugin({
filename: '[name]_[contenthash:8].css'
}),
new OptimizeCSSAssetsPlugin({
assetNameRegExp: /\.css$/g,
cssProcessor: require('cssnano')
}),
// 需要设置模板html,打包后会将bundle文件注入html中
new HtmlWebpackPlugin({
template: path.join(__dirname, 'src/index.html'),
filename: 'index.html',
chunks: ['index'],
inject: true,
minify: {
html5: true,
collapseWhitespace: true,
preserveLineBreaks: false,
minifyCSS: true,
minifyJS: true,
removeComments: false
}
}),
new HtmlWebpackPlugin({
template: path.join(__dirname, 'src/search.html'),
filename: 'search.html',
chunks: ['search'],
inject: true,
minify: {
html5: true,
collapseWhitespace: true,
preserveLineBreaks: false,
minifyCSS: true,
minifyJS: true,
removeComments: false
}
})
]
};
为方便打包,使用clean-webpack-plugin自动清理构建目录,默认会删除 output 指定的输出⽬录
····
const CleanWebpackPlugin = require('clean-webpack-plugin')
module.exports = {
// 略
output: {
path: path.join(__dirname, './dist'),
filename: '[name].[chunkhash:8].js'
},
plugins: [
new CleanWebpackPlugin(),
]
// 略
}
热更新
- 安装webpack-dev-server
- package.json文件中添加命令行,”dev": “webpack-dev-server --open”
- webpack.dev.js中添加如下代码
devServer: {
contentBase: './dist',
hot: true
}