c分清到底是plugin还是loader
**treeShaking 只支持ESModule
一个模块中没用到的
// mode: "dev"默认没有treeShaking ,因此即使使用treeShaking ，也不会去掉模块，只是在代码标记；方便调试错误
// 用到的才导出
optimization: {
usedExports: true
},
// package.json中
"sideEffects": ['@babel/polly-fill','*.css'],
"sideEffects": false,// 对所有模块treeShaking
对于'@babel/polly-fill' 该模块不会导出，只是在window.Promise;treeShaking 会将此模块忽略
**mode
// An highlighted block
"scripts": {
"dev": "webpack-dev-server --config ./build/webpack.dev.js",
"build": "webpack --config ./build/webpack.prod.js"
},
//webpack.common.js
//npm i webpack-merge -D
//webpack.dev.js
const merge = require('webpack-merge')
const config = require('./webpack.common')
module.exports = merge(config,devConfig)
//webpack.prod.js
const merge = require('webpack-merge')
const config = require('./webpack.prod')
module.exports = merge(config,prodConfig)
**codeSplitting
bundle analysis
CleanWebpackPlugin默认build目录是根目录
// An highlighted block
var foo = 'bar';
**SplitChunksPlugin
// 手动将main.js拆成库代码和业务代码
entry: {
'lodash': './src/lodash.js',
'main': './src/test.js'
},
//webpack自带codeSplitting插件，同步载入模块
optimization: {
splitChunks: {
chunks: 'all'
}
}
// 异步载入模块不需要配置 ,但打包的文件名是vendors~lodash.js
function getComponent() {
// magic tree语法+
return import(/*webpackChunkName:"lodash"*/'lodash').then(({default:_})=>{
var div = document.createElement('div')
div.innerHTML = _.join(['c','jj'],'**')
return div
})
}
getComponent().then(ele=>{
document.body.appendChild(ele)
})
//异步载入模块配置后,打包的文件名是lodash.js
optimization: {
splitChunks: {
chunks: 'all',
cacheGroups: {
vendors:false
default: false
}
}
},
// 其他配置项,默认配置
optimization: {
splitChunks: {
chunks: 'async', // chunks: 'all',
minSize: 30000,//引入的库作代码分割的条件
maxSize: 0, // 对分割后代码块继续分割
minChunks: 1,//对代码至少使用多少次进行代码分割//感觉对异步模块载入没效？？？？？
maxAsyncRequests: 5,//同时只能加载5个请求，打包前5个库时，生成js文件，超过5个，不会进行代码分割？？
maxInitialRequests: 3,//入口文件引入的js代码分割时，最多分割成3个
automaticNameDelimiter: '~',//
automaticNameMaxLength: 30,
name: true,
//确定分割出来的group要放在哪个文件中
cacheGroups: {//同步载入模块时vendors和default也要配制,vendors~main.js
vendors: {
test: /[\\/]node_modules[\\/]/,
priority: -10,
// name: 'vendors'
// filename: '[name].bundle.js'
},
default: {
priority: -20,
reuseExistingChunk: true,//如果之前打包过，直接使用，不在重复打包
filename: 'default.js'
}
}
}
}
**Lazy Loading
// An highlighted block
// function getComponent() {
// return import(/*webpackChunkName:"lodash"*/'lodash').then(({default:_})=>{
// var div = document.createElement('div')
// div.innerHTML = _.join(['c','jj'],'**')
// return div
// })
// }
async function getComponent() {
const {default:_} = await import(/*webpackChunkName:"lodash"*/'lodash')
var div = document.createElement('div')
div.innerHTML = _.join(['c','jj'],'**')
return div
}
document.addEventListener('click',()=>{
// import异步加载,懒加载是es引入的概念；需要某些模块的时候，再去请求
getComponent().then(ele=>{
document.body.appendChild(ele)
})
})
**chunk
// An highlighted block
Asset Size Chunks Chunk Names
index.html 355 bytes [emitted]
lodash.js 70.2 KiB 0 [emitted] lodash
main.js 2.46 KiB 1 [emitted] main
**Preloading
访问首页时不需要加载" 登陆 "的代码
// An highlighted block
让代码覆盖率高，使用异步加载，用到时才加载，提高性能
import (/* webpackPrefetch: true */'./click.js').then(({default : _})=>{
_()
})
**Prefetching(可能存在浏览器兼容)
// An highlighted block
var foo = 'bar';
main.js走filename,而main.js依赖的文件走chunkFilename配置
output: {
// publicPath: '/',
filename: '[name].js',
chunkFilename: '[name].chunk.js',
// __dirname指webpack.config.js所在的目录
path: path.resolve(__dirname,'../dist')
}
**mini-css-extract-plugin（css代码分割）？？？dev下的样式经常有问题==（已解决）==因为使用tree shinking时package.json里面sideEffects中配置的是false,将没有导出的文件全部删除掉
1. npm安装
2. require && loader里替换 && plugin中声明
3. 注意tree shinking
// npm install --save-dev mini-css-extract-plugin
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
module: {
rules: [
{
test: /\.scss$/,
use: [MiniCssExtractPlugin.loader,'css-loader','sass-loader']
},
{
test: /\.css$/,
use: [MiniCssExtractPlugin.loader,'css-loader']
},
]
},
plugins: [
new MiniCssExtractPlugin({
filename: '[name].css', //html会将css以link形式引入
chunkFilename: '[name].[hash].css',
})
],
// npm i optimize-css-assets-webpack-plugin -D
// css代码的压缩和合并
const OptimizeCSSAssetsPlugin = require('optimize-css-assets-webpack-plugin');
optimization: {
minimizer: [ new OptimizeCSSAssetsPlugin({})],
},
//const MiniCssExtractPlugin = require('mini-css-extract-plugin');
多个入口文件分别引入的css强行打包到一个css styles文件中
module.exports = {
optimization: {
splitChunks: {
cacheGroups: {
styles: {
name: 'styles',
test: /\.css$/,
chunks: 'all',
enforce: true, //不管min和maxSize
},
},
},
},
多个入口文件分别引入的css打包到不同css文件中
**缓存
performance: false, //不让提示性能上问题
// An highlighted block
filename: '[name].[contentHash].js',
chunkFilename: '[name].[contentHash].js',
老版本的webpack，文件并未改变两次打包的hash名也可能一样，因此需要在
optimization: {
runtimeChunk: {
name: 'runtime' //runtime.js存在mainfest，业务代码和库代码之间映射关系
}
}
**Shimming （改变一些特性）
// An highlighted block
const webpack = require('webpack')
plugins:[
new webpack.ProvidePlugin({
$: 'jquery' //模块中用了$，会自动引入jquery库
})
]
export function ui(){
$('body').css('background',_join(['blue'],''))
}
new webpack.ProvidePlugin({
$: 'jquery' ,//模块中用了$，会自动引入jquery库
_join: ['lodash','join']
})
每个模块的this指向window
//npm i imports-loader -D
module: {
rules: [
{ test: /\.js$/,
exclude: /node_modules/,
use: [
{
loader: "babel-loader"
},
{
loader: "imports-loader?this=>window"
}
],
// 环境变量的使用方法
"scripts": {
"dev-build": "webpack --config ./build/webpack.common.js",
"dev": "webpack-dev-server --config ./build/webpack.common.js",
"build": "webpack --env.production --config ./build/webpack.common.js"
// "build": "webpack --env production --config ./build/webpack.common.js"
},
const merge = require('webpack-merge')
const devConfig = require('./webpack.dev')
const prodConfig = require('./webpack.prod')
module.exports = (env)=>{ //module.exports = (production)=>{
if(env && env.production){ // if(production){
return merge(config,devConfig)
}else{
return merge(config,prodConfig)
}
}
431
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
