- 入口配置entry(必填)
//webpack.config.js module.exports = { …… //多入口;推荐使用对象写法 //entry: ['./app.js','./app2.js'], entry: { app: './app.js', app2: './app2.js' } …… }
- 出口配置output(必填):
//webpack.config.js module.exports = { …… output: { path: __dirname+'/dist', //使用绝对路径 filename: "[name].[hash:4].bundle.js" //名称格式:入口name.4位hash.bundle.js } …… }
- 打包模式mode(webpack4后的版本必填):
//webpack.config.js module.exports = { …… mode:"development", //none,development,production(生产模式做代码压缩,开发模式不做代码压缩) …… }
- loader配置处module(非必填):
安装loader:npm install babel-loader @babel/core --save-dev
安装preset: npm install @babel/preset-env --save-dev//webpack.config.js module.exports = { …… module: { rules: [ { test: /\.js$/, // loader: 'babel-loader' 这个写法只能写字符串 // use: ['babel-loader','css-loader'] 这个写法读取顺序从右向左 use: { loader: 'babel-loader', //设置babel编译规则,preset=>@babel/preset-env //每个loader都有对应的options配置项 options: { presets: [ [ '@babel/preset-env', { targets: { browsers: ['>1%', 'last 2 version', 'not ie<=8'] } } ] ] } } } ] } …… }
可以将options的value部分写成json格式保存为.babelrc文件中
- 插件配置plugins(非必填):
举例1:配置eslint
安装eslint: npm install eslint eslint-webpack-plugin --save-dev
配置.eslintrc.js文件://webpack.config.js const eslintplugin = require('eslint-webpack-plugin') module.exports = { …… plugins:[ new eslintplugin() ] …… }
- optimization代码分割:
optimization: { splitChunks: { chunks: 'all', //all:全部;async:只判断异步引用;initial:只判断同步引用 // minChunks: 2, //该包被引用最低次数 // minSize: 0, //分包的最低大小要求 cacheGroups: { vendor: { //第三方插件或工具库的代码分割 test: /[\\/]node_modules[\\/]/, filename: 'vendor.js', chunks: 'all', minChunks: 1 }, common: { //通用模块的代码分割 filename: 'common.js', chunks: 'all', minChunks: 2, minSize: 0 } } }, runtimeChunk: { //打包运行时代码分割 name: 'runtime' } }
- 处理css/less文件(module中配置)
css-loader style-loader less-loader:处理css或less文件
css-minimizer-webpack-plugin:解析成额外css文件
mini-css-extract-plugin:压缩css文件代码const miniCss = require('mini-css-extract-plugin') const cssminizer = require('css-minimizer-webpack-plugin') …… { test: /\.css$/, use: [miniCss.loader, 'css-loader'] }, { test: /\.less$/, use: [miniCss.loader, 'css-loader', 'less-loader'] } ] }, plugins: [ new miniCss({ filename: 'test.bundle.css' }), new cssminizer() ], ……
其他资源文件解析:
file-loader url-loader:后者基于前者
注意:需要引入资源文件并使用,否则不会解析
webpack4写法:(webpack5兼容这个写法)module: { rules: [ …… { test: /\.(jpg|jpeg|png|gif|svg)$/, loader: 'url-loader', options: { limit: 5000000, //大小限制,超出这个大小的资源不解析成base64 name: '[name].[hash].[ext]' } }, { test: /\.mp3$/, loader: 'url-loader', options: { limit: 5000, name: '[name].[hash].ext' } } ] },
webpack5自带解析资源文件的写法:
{ test: /\.(jpg|jpeg|png|gif|svg)$/, type: 'asset', parser: { dataUrlCondition: { maxSize: 50000 } }, generator: { filename: '[name].[hash].[ext]' }
- html解析(plugins中):
html-webpack-plugin:插件配置、多入口文件需要配置多html就重复new对象进行配置plugins: [ new miniCss({ filename: 'test.bundle.css' }), new cssminizer(), new htmlwebpackplugin({ template: './index.html', filename: 'index.html', chunks: ['app'], minify: { collapseWhitespace: false, removeComments: false }, inject: 'body' }), new htmlwebpackplugin({ template: './index2.html', //使用的html模板 filename: 'index2.html', //生成的文件名 chunks: ['app2'], //使用那个入口文件 title: 'index2', arr: [{ title: 'item1' }, { title: 'item2' }, { title: 'item3' }], minify: { collapseWhitespace: true, //去掉空格 removeComments: false //index.html内容的格式,去除备注 }, inject: 'body' //script插入位置:body-在body后面、head-在head内 }) ],
html中的动态生成title或其它内容:(jsp写法)
需要在模板中进行动态写入<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title><%= htmlWebpackPlugin.options.title %></title> </head> <body> <% htmlWebpackPlugin.options.arr.forEach(function(item){ %> <div> <%= item.title %> <div> <%})%> <div id="app2"></div> </body> </html>
优化打包速度:
创建webpack.dll.js文件,将第三方库作打包记录,只在第一次打包的时候会打包,后面的打包不再重新打包这些第三方库,
执行:npm run dll(生成[name]-minifest.json文件)
npm run build
以下是webpack.dll.js文件//你先去把一些 第三方库打包-》后续打包的时候不去打包这第三方 //用来提前打包一些第三方库 //vue-cli webpack4 webpack-cli 3.3.12 const path = require('path') const webpack = require('webpack') // dll文件存放的目录 const dllPath = 'public/vendor' module.exports = { mode: 'production', entry: { // 需要提取的库文件 vendor: ['vue', 'vuex', 'vue-router', 'echarts'] }, //js output: { path: path.join(__dirname, dllPath), filename: '[name].dll.js', //vendor.dll.js // vendor.dll.js中暴露出的全局变量名 // 保持与 webpack.DllPlugin 中名称一致 library: '[name]_[hash]' }, plugins: [ //json // manifest.json 描述动态链接库包含了哪些内容 new webpack.DllPlugin({ path: path.join(__dirname, dllPath, '[name]-manifest.json'), // 保持与 output.library 中名称一致 name: '[name]_[hash]', context: process.cwd(), format: true //保存文件内容是否格式化 }) ] }
vue.config.js文件:
const webpack = require('webpack') module.exports = { configureWebpack: (config) => { config.devtool = 'none' …… return { plugins: [ new webpack.DllReferencePlugin({ context: process.cwd(), manifest: require('./public/vendor/vendor-manifest.json') }) ] } ……
package.json scripts:{ "dll":"webpack --config webpack.dll.js" }
webpack配置
于 2024-03-05 17:02:07 首次发布
![](https://img-home.csdnimg.cn/images/20240711042549.png)