记录webpack的一些常用的配置
文章目录
一、webpack五大核心概念
1 entry入口
开始应用程序打包过程的一个或多个起点。如果传入数组,则会处理所有条目。
动态加载的模块 不是 入口起点
。
一个需要考虑的规则:每个 HTML 页面都有一个入口起点。单页应用(SPA):一个入口起点,多页应用(MPA):多个入口起点。
module.exports = {
//...
entry: {
main: './main.js',
app: './app.js',
index: './index.js',
},
};
2 output 输出
打包输出的出口配置
output: {
/**
* 开发环境没有输出
*/
path: path.resolve(__dirname, '../dist'),
// 文件名
filename: 'js/[name].[contenthash:8].js',
chunkFilename: 'js/[name].[contenthash:8].chunk.js',
assetModuleFilename: 'static/[hash:10][ext][query]',
clean: true, // 每次打包之前自动删除原来的路径下的文件
},
3 module
这些选项决定了如何处理项目中的不同类型的模块(使用loader)。
module: {
rules: [{
test: /\.css$/i,
use: getStyleLoader(),
},
{
test: /\.s[ac]ss$/i,
use: getStyleLoader('sass-loader'),
},
{
test: /\.(png|svg|jpg|jpeg|gif)$/i,
type: 'asset',
parser: {
dataUrlCondition: {
maxSize: 8 * 1024 // 8kb
}
}
},
{
test: /\.m?js$/,
exclude: /node_modules/,
use: [{
loader: 'thread-loader',
options: {
work: Threads
}
},
{
loader: 'babel-loader',
options: {
cacheDirectory: true, // 开启babel编译缓存
cacheCompression: false // 关闭缓存压缩,节约打包时间
}
}
]
}
]
},
4 plugins
plugins 选项用于以各种方式自定义 webpack 构建过程。webpack 附带了各种内置插件,可以通过 webpack.[plugin-name] 访问这些插件。
new HtmlWebpackPlugin({
template: path.resolve(__dirname, '../public/index.html') // 打包html文件以此文件为模板
}),
new MiniCssExtractPlugin({ // 提取样式文件用link标签引入,解决闪屏问题
filename: 'styles/main.css',
chunkFilename: 'styles/[name].[coontenthash:8].css'
}),
new ESLintPlugin({
context: path.resolve(__dirname, "../src"), // 检查目录
cache: true, // 开启eslint检查缓存
cacheLocation: path.resolve(__dirname, "../node_modules/.cache/eslint-cache"), // 缓存目录
threads: Threads // 开启多进程和设置进程数量
}),
new WorkboxPlugin.GenerateSW({
// 这些选项帮助快速启用 ServiceWorkers
// 不允许遗留任何“旧的” ServiceWorkers
clientsClaim: true,
skipWaiting: true,
})
// new PreloadWebpackPlugin({
// rel: 'prefetch'
// })
5 mode
通过选择 development, production 或 none 之中的一个,来设置 mode 参数,你可以启用 webpack 内置在相应环境下的优化。其默认值为 production。
二、完整配置
1.配置打包入口和输出(以开发环境、单入口为例)
entry: {
main: path.resolve(__dirname, "../src/main.js")
},
output: {
filename: "js/[name].js",
path: undefined
},
2 配置module, 使用loader处理各种文件资源,使用babel-loader处理js
module: {
rules: [
// 处理css
{
test: /\.css$/,
use: [
'style-loader',
'css-loader',
{
loader: 'postcss-loader',
postcssOptions: {
plugins: ["postcss-preset-env"] // 能解决大部分样式兼容问题, 需要在 package.json中指定处理的程度范围
}
},
]
},
// 处理scss
{
test: /\.s[ac]ss$/,
use: [
'style-loader',
'css-loader',
{
loader: 'postcss-loader',
postcssOptions: {
plugins: ["postcss-preset-env"] // 能解决大部分样式兼容问题, 需要在 package.json中指定处理的程度范围
}
},
'sass-loader']
},
// 处理less
{
test: /\.less$/
use: [
'style-loader',
'css-loader',
{
loader: 'postcss-loader',
postcssOptions: {
plugins: ["postcss-preset-env"] // 能解决大部分样式兼容问题, 需要在 package.json中指定处理的程度范围
}
},
'less-loader']
},
// 处理图片
{
test: /\.(jpe?g|png|webp|svg|gif)$/,
type: 'asset',
parser: {
dataUrlCondition: {
maxSize: 10 * 1024
}
}
},
// 处理其他资源
{
test: /\.(woff2?|ttf)$/,
type: 'asset/resource'
},
// 处理js
{
test: /\.jsx?$/,
include: path.resolve(__dirname, "../src"),
loader: "babel-loader",
options: {
cacheDirectory: true,
cacheCompression: false
}
}
]
},
3 配置plugins
使用eslint开启代码检测
plugins: [
new HtmlWebpackPlugin(),
new EslintWebpackPlugin({
context: path.resolve(__dirname, "../src"),
exclude: "node_modules",
cache: true,
cacheLocation: path.resolve(__dirname, "../node_modules/.cache/eslintCache")
})
]
4 代码优化
开启代码分割,将那些在多个文件中被引用的模块提取为单独的一个模块,避免重复打包
开启runtimaeChunk,避免那些被引用的chunk在只改变一部分的情况下导致所有引用文件都被改变
optimiziation: {
splitChunks: {
chunks: 'all'
},
runtimeChunk: {
name: (entrypoint) => `runtime~${entrypoint.name}.js`
}
},
5 其他配置
// 开启sourcemap,打包成生成map文件方便代码调试
devTool: 'cheap-module-sourece-map',
// 开启开发服务器
devServer: {
host: 'localhost',
port: 80,
open: true,
hot: true // 开启热模块替换
},
mode: 'development'