1.配置resolve提高文件查找效率
resolve:{
extensions: ['.wasm', '.mjs', '.js', '.json'], //引入模块时可以不加扩展名
alias:{
'@': path.resolve('src'),
'test1':path.resolve('src/page/pageView/test.js'),
}
},
2.不解析的模块
module:{
noParse:/jquery/, //不去解析jquery
rules:[
//...
]
},
3.dell-plugin将一些不做修改的依赖文件，提前打包。这样我们开发代码发布的时候就不需要再对这部分代码进行打包。从而节省了打包时间。
DllPlugin插件： 用于打包出一个个动态连接库
DllReferencePlugin: 在配置文件中引入DllPlugin插件打包好的动态连接库
创建一个webpack.dll.config.js文件
var path = require("path");
var webpack = require("webpack");
module.exports = {
// 要打包的模块的数组
entry: {
vendor: ['vue/dist/vue.esm.js','vue-router']
},
output: {
path: path.join(__dirname, '../static/js'), // 打包后文件输出的位置
filename: '[name].dll.js',// vendor.dll.js中暴露出的全局变量名。
library: '[name]_library' // 与webpack.DllPlugin中的`name: '[name]_library',`保持一致。
},
plugins: [
new webpack.DllPlugin({
path: path.join(__dirname, '.', '[name]-manifest.json'),
name: '[name]_library',
context: __dirname
}),
]
};
在package.json的scripts里加上：
"dll": "webpack --config build/webpack.dll.config.js",
运行npm run dll 在static/js下生成vendor-manifest.json;
在build/webpack.base.conf.js里加上：
// 添加DllReferencePlugin插件
plugins: [
new webpack.DllReferencePlugin({
context: __dirname,
manifest: require('./vendor-manifest.json')
})
],
然后在index.html中引入vendor.dll.js：
<div id="app"></div>
<script src="./static/js/vendor.dll.js"></script>
4.提取公共css和js
5.去除未使用的css和js
webpack --display-used-exports --optimize-minimiz
6.* happypack 就能让Webpack把任务分解给多个子进程去并发的执行，子进程处理完后再把结果发送给主进程。
npm i happypack@next -D
const HappyPack = require('happypack');
rules: [
{
test: /\.js$/,
// 把对 .js 文件的处理转交给 id 为 babel 的 HappyPack 实例
use: ['happypack/loader?id=babel'],
exclude: path.resolve(__dirname, 'node_modules'),
},
{
test: /\.css$/,
// 把对 .css 文件的处理转交给 id 为 css 的 HappyPack 实例
use: ['happypack/loader?id=css']
}
]
new Happypack({
//ID是标识符的意思，ID用来代理当前的happypack是用来处理一类特定的文件的
id: 'js',
use: [{
loader: 'babel-loader',
//options=query都是向插件传递参数的
options: {
presets: [["@babel/preset-env", { modules: false }], "@babel/preset-react"],
plugins: [
["@babel/plugin-proposal-decorators", { "legacy": true }],
["@babel/plugin-proposal-class-properties", { "loose": true }],
]
}
}]
}),
new Happypack({
//ID是标识符的意思，ID用来代理当前的happypack是用来处理一类特定的文件的
id: 'css',
use: [MiniCssExtractPlugin.loader, 'css-loader', 'postcss-loader'],
threads: 4,//你要开启多少个子进程去处理这一类型的文件
verbose: true//是否要输出详细的日志 verbose
})
7.css和js压缩,webpack-parallel-uglify-plugin 插件可以使用多继承来压缩js
npm i -D webpack-parallel-uglify-plugin
// 引入 ParallelUglifyPlugin 插件
const ParallelUglifyPlugin = require('webpack-parallel-uglify-plugin');
module.exports = {
plugins: [
// 使用 ParallelUglifyPlugin 并行压缩输出JS代码
new ParallelUglifyPlugin({
// 传递给 UglifyJS的参数如下：
uglifyJS: {
output: {
/*
是否输出可读性较强的代码，即会保留空格和制表符，默认为输出，为了达到更好的压缩效果，
可以设置为false
*/
beautify: false,
/*
是否保留代码中的注释，默认为保留，为了达到更好的压缩效果，可以设置为false
*/
comments: false
},
compress: {
/*
是否在UglifyJS删除没有用到的代码时输出警告信息，默认为输出，可以设置为false关闭这些作用
不大的警告
*/
warnings: false,
/*
是否删除代码中所有的console语句，默认为不删除，开启后，会删除所有的console语句
*/
drop_console: true,
/*
是否内嵌虽然已经定义了，但是只用到一次的变量，比如将 var x = 1; y = x, 转换成 y = 5, 默认为不
转换，为了达到更好的压缩效果，可以设置为false
*/
collapse_vars: true,
/*
是否提取出现了多次但是没有定义成变量去引用的静态值，比如将 x = 'xxx'; y = 'xxx' 转换成
var a = 'xxxx'; x = a; y = a; 默认为不转换，为了达到更好的压缩效果，可以设置为false
*/
reduce_vars: true
}
}
}),
]
}
根据开发环境和生产环境配置不同的webpack.config.js ，基础配置文件（webpack.base.config.js）,开发环境配置文件（webpack.dev.config.js）,基础配置文件（webpack.prod.config.js），如然后使用（webpack.config.js）作为唯一入口文件根据环境变量来识别环境
webpack.config.js配置如下：
npm i webpack-merge -D
npm i cross-env -D
const path=require('path'); // 导入path模块
const webpack=require('webpack'); // 导入webpack模块
const base=require('/webpack.base.config.js'); // 导入基础配置模块
const merge = require('webpack-merge') // 合拼配置文件
const NODE_ENV = process.env.NODE_ENV; //获取package.json环境变量
const other
if(NODE_ENV == 'development'){
other=require('/webpack.dev.config.js'); // 导入基础配置模块
} else{
other=require('/webpack.prod.config.js'); // 导入基础配置模块
}
module.exports=merge(base,other)
package.json文件修改如下:
"build-production": "cross-env NODE_ENV=production && webpack --mode development",
"build-development": "cross-env NODE_ENV=development && webpack --mode development",
8.接入CDN
output: {
path: path.resolve(__dirname, 'dist'),
filename: '[name]_[hash:8].js',
publicPath: 'http://img.test.cn'
},
