概述
webpack是前端打包工具,默认只能打包js,可通过loader打包其他模块,可使用plugin实现自动化,如自动压缩代码等
const path = require('path')
module.exports = {
entry: './src/main.js',
output: {
filename: 'bundle.js',
path: path.join(__dirname, 'dist'),
publicPath: 'dist/'
}
}
工作模式
配置mode,指定生产和开发,生产会压缩等
// mode有三种取值,production、development 和 none。
// production Webpack 会自动优化打包结果;
// development Webpack 会自动优化打包速度,添加一些调试过程中的辅助;
// none Webpack 就是运行最原始的打包,不做任何额外处理;
mode: 'none',
loader
css-loader style-loader 打包css
file-loader url-loader 打包图片、字体等
bable-loader 转换es6
module: {
rules: [
{
test: /.js$/,
use: {
loader: 'babel-loader',
options: {
presets: ['@babel/preset-env']
}
}
},
{
test: /.css$/,
use: [
'style-loader',
'css-loader'
]
},
{
test: /.png$/,
use: {
loader: 'url-loader',
options: {
limit: 10 * 1024 // 10 KB以下使用url-loader否则使用file-loader,项目需引用file-loader
}
}
},
{
test: /.html$/,
use: {
loader: 'html-loader',
options: {
attrs: ['img:src', 'a:href'] // 可把a标签的href当做模块打包
}
}
}
]
}
plugin
插件配置,可实现自动化的功能,如压缩代码,拷贝文件,清空打包目录等
plugins: [
// 清空打包文件目录
new CleanWebpackPlugin(),
// 用于生成 index.html
new HtmlWebpackPlugin({
title: 'Webpack Plugin Sample',
meta: {
viewport: 'width=device-width'
},
template: './src/index.html'
}),
// 复制静态资源目录到打包目录
new CopyWebpackPlugin([
'public'
]),
new MiniCssExtractPlugin(), // 压缩css
new webpack.DefinePlugin({
// 值要求的是一个代码片段 用来定义全局变量,可根据环境不同去配置不同的值
URL: 'http://api.com'
})
]
dev server
devServer: {
contentBase: './public',
hot: true, // 启动热更新开发
// hotOnly: true // 只使用 HMR HMR只替换修改模块
// 服务器代理
proxy: {
'/api': {
// http://localhost:8080/api/users -> https://api.github.com/api/users
target: 'https://api.github.com',
// http://localhost:8080/api/users -> https://api.github.com/users
pathRewrite: {
'^/api': ''
},
// 不能使用 localhost:8080 作为请求 GitHub 的主机名
changeOrigin: true
}
}
},
source map
eval cheap-eval-source-map cheap-module-eval-source-map eval-source-map cheap-source-map cheap-module-source-map inline-cheap-source-map inline-cheap-module-source-map source-map inline-source-map hidden-source-map nosources-source-map
共有12中source map模式,eval代表使用js的eval函数生成,cheap代表简洁的,module代表和源代码相同而不是转换后的,hidden代表隐藏source map但是把文件生成出,nosource是隐藏源代码只显示行列
devtool: 'eval', // 开启source map 设置为false不开启
生产环境优化
// 多入口
entry: {
index: './src/index.js',
about: './src/album.js'
},
output: {
filename: '[name].bundle.js'
},
optimization: {
splitChunks: {
// 自动提取所有公共模块到单独 bundle,代码分割
chunks: 'all'
}
},
// 代码按需加载,动态导入,
import(/* webpackChunkName: 'components' */'./posts/posts').then(({ default: posts }) => {
posts()
})
optimization: {
// 模块只导出被使用的成员
usedExports: true,
// 尽可能合并每一个模块到一个函数中
concatenateModules: true,
// 压缩输出结果
minimize: true
}
hash
output: {
filename: '[name]-[contenthash:8].bundle.js', // 8位hash contenthash代表每个打包文件有改动hash变化,[hash]代表项目有变更就会变化,[chunkhash]代表入口文件有变更就会变化
},