代码：github
这一部分通过webpack的基本配置，使用loader对图片和样式进行打包，从而了解webpack4简单的用方法，保证自己能够配置正确，提升学习动力。
安装webpacknpm install webpack --save-dev
安装指定版本webapcknpm install --save-dev webpack@<version>
webpack 4+ 版本，还需要安装webpack-clinpm install webpack-cli --save-dev
npx webpack -v：查看webpack版本npx webpack-cli -v：查看webpack-cli版本
推荐本地安装webpack和webpack-cli 写这篇博客的时候webpack最新版本为：4.30.0，也是这篇学习webpack4使用的版本
在demo1目录下新建src目录，在src目录下新建index.js
mkdir src cd src touch index.jsdemo1目录结构
demo1 ├── demo1/package.json ├── demo1/package-lock.json └── demo1/src └── demo1/src/index.js在index.js中加写代码，例如：
//index.js let demo='webpack4' console.log(demo)webpack4可以零配置打包，webpack4会默认对src目录下的index.js文件打包。 现在运行npx webapck，可以在demo1目录下看到dist目录，dist目录下有一个main.js文件，这就是打包后的文件，打开查找可以看到 console.log(demo)，说明index.js被打包到main.js中。
在demo1目录下新建webpack配置文件webpack.config.js
运行npx webpack命令npx webpack等价于npx webpack --config webpack.config.js
当webapck配置文件命名为webpack.config.js时可以省略--config *.js，直接执行npx webpack即可，否则执行npx webpack --config 配置文件名。
看到dist目录下有bundle.js，说明webpack配置正确。
在package.json中配置'script'
"scripts": { "build": "webpack" }添加"build": "webpack"，运行npm run build效果等价于执行npx webpack命令。
安装file-loadernpm i file-loader --save-dev
在src目录下新建images文件夹，存放图片
运行npm run build后的目录结构如下
demo1 ├── demo1/dist │ ├── demo1/dist/bundle.js │ ├── demo1/dist/images │ │ └── demo1/dist/images/11.png │ └── demo1/dist/index.html ├── demo1/package.json ├── demo1/package-lock.json ├── demo1/src │ ├── demo1/src/images │ │ └── demo1/src/images/11.png │ └── demo1/src/index.js └── demo1/webpack.config.js在dist目录下出现了images目录和图片，创建index.html，引入js文件，在浏览器中打开就可以看到图片。
url-loader安装npm i url-loader -D
url-loader的作用跟'file-loader'的作用很类似
limit属性：当图片大小大于属性值时打包成图片输出到images目录下，否则打包成base64编码的图片注入bundle.js中
因为base64编码的图片导致打包文件变大，所以图片比较小时打包成base64编码的图片，图片比较大时单独打包成一张图片。
安装相应的loadernpm i css-loader style-loader -Dnpm i node-sass sass-loader -Dnpm i postcss-loader -Dnpm i autoprefixer -D
postcss-loader和autoprefixer配合使用可以在打包过程中自动添加前缀
在demo1根目录下新建postcss.config.js，配置如下
//postcss.config.js module.exports={ plugins: [ require('autoprefixer') ] }在demo1的src下新建css文件夹，在css文件夹下新建style.css和index.scss文件。
index.scss
body{ border: 1px solid red; width: 300px; height: 300px; img{ width: 100px; height: 100px; border-radius: 10%; transform: translate(100px,100px); } }style.css
body{ border-radius: 10%; }index.js
//index.js import image from './images/11.png' import './style.css' import './index.scss' let img=new Image() img.src=image document.body.append(img)运行npm run build，在dist目录下新建index.html，引入js文件，在浏览器中打开就可以看到效果，说明打包成功。
css模块化，避免页面样式之间相互影响 在webpack.config.js中的css-loader添加modules: true
//webpack.config.js module:{ rules: [ { test: /\.css$/, use:[ 'style-loader', { loader: 'css-loader', options: { modules: true } }, 'postcss-loader' //加前缀 npm i autoprefixer -D //在项目根目录下配置postcss.config.js文件 ] }, { test: /\.scss$/, use:[ 'style-loader', { loader: 'css-loader', options: { importLoaders: 2, //importLoaders //用于配置css-loader作用于@import的资源之前有多少个loader先作用于@import的资源 modules: true //加载css模块化打包，避免样式文件之间相互影响 } }, 'postcss-loader', 'sass-loader' ] } ] }修改index.js.img是类名需要在样式文件中提前写好样式
//index.js import image from './images/11.png' import style from './css/style.css' // import style from './css/index.scss' let img=new Image() img.src=image //style.img .img是scss文件中写好的类名 img.classList.add(style.img) document.body.append(img)index.scss
body{ border: 1px solid red; width: 300px; height: 300px; img{ width: 100px; height: 100px; border-radius: 10%; transform: translate(100px,100px); } .img{ border: 10px solid royalblue; } }style.css
body{ border-radius: 10%; } body .img{ border: 10px solid yellow; }结果
可以看到添加了一个class，类名是一串比较复杂的字符串，从而避免这个样式对别的元素产生影响。
这一部分主要是学会使用html-webpack-plugin和clean-webpack-plugin插件，主要是学会配置devServer以及使用webpack的热模块替换功能。
首先，在webpack4目录下新建demo2文件夹将demo1目录下的所有东西复制到demo2中
在上一部分我们都是手动在dist目录下创建index.html引入js文件查看打包结果，这样会很麻烦。我们可以使用html-webpack-plugin来自动生产index.html，并且能够自动引入打包好的文件，直接打开生产的html就可以看到打包结构。
安装npm i html-webpack-plugin -D
在webpack.config.js中配置plugins配置项
const path = require('path') const htmlWebpackPlugin = require('html-webpack-plugin') module.exports={ //mode development: 开发环境 production：生产环境 mode: 'development', //entry 入口文件配置 entry: { index: './src/index.js' }, //打包完成后文件输出位置配置 output: { //filename 设置打包后文件的名字 //如果不设置filename，则文件的名字跟入口文件路径的属性名一样 filename: 'bundle.js', //path 设置打包完成后文件输出路径 path: path.resolve(__dirname,'dist') }, module: { }, plugins: [ new htmlWebpackPlugin({ template: './index.html' }) ] }在demo2目录下新建index.html作为模板
index.html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>模板</title> </head> <body> <div id="root"></div> <script type="text/javascript" src="bundle.js"></script></body> </html>运行npm run build，可以看到dist目录下自动生产index.html，并且还自动引入js文件
每次打包生成的dist目录，如果改一次代码，都得要删除一次dist目录，这样很麻烦，可以通过clean-webpack-plugin在每次打包的前自动清空dist目录。
安装npm i clean-webpack-plugin -D
在webpack.config.js的plugins中配置如下
const path = require('path') const htmlWebpackPlugin = require('html-webpack-plugin') const cleanWebpackPlugin = require('clean-webpack-plugin') module.exports={ //mode development: 开发环境 production：生产环境 mode: 'development', //entry 入口文件配置 entry: { index: './src/index.js' }, //打包完成后文件输出位置配置 output: { //filename 设置打包后文件的名字 //如果不设置filename，则文件的名字跟入口文件路径的属性名一样 filename: 'bundle.js', //path 设置打包完成后文件输出路径 path: path.resolve(__dirname,'dist') }, module: { }, plugins: [ new htmlWebpackPlugin({ template: './index.html' }), new cleanWebpackPlugin() ] }运行npm run build，可以自己测试，每次打包前都会把dist目录下的文件删掉。
当有多入口的时候，需要修改filename的属性值为'[name].js'
运行npm run build，就会在dist目录下生产index.js和main.js
devtool决定源代码与打包后的代码之间的映射关系，方便对代码进行调试。
开发环境推荐: cheap-module-eval-source-map 生产环境推荐: cheap-module-source-map
devtool具体内容请查阅：文档：devtool
module.exports={ devtool: 'cheap-module-eval-source-map', //开发环境推荐: cheap-module-eval-source-map //生产环境推荐: cheap-module-source-map }文档：devServer
安装webpack-dev-servernpm i webpack-dev-server -D
修改package.json的script，添加 "start": "webpack-dev-server"
"scripts": { "start": "webpack-dev-server" },执行npm run start后打开浏览器就可以看到效果，当我们修改代码的时候页面就会重新刷新。
有时我们希望页面只更新我们修改的那一部分就可以了，而并不是刷新页面，所以需要启用webpack的热模块替换功能。
引入webpack：const webpack=require('webpack') 添加内容如下：
const webpack=require('webpack') module.exports={ plugins: [ new webpack.HotModuleReplacementPlugin() //启用HMR ], devServer: { contentBase: './dist', // open: true, //自动打开浏览器 // port: 8080, hot: true, //启用webpack的热模块替换功能 hotOnly: true //devServer.hot在没有页面刷新的情况下启用热模块替换作为构建失败时的后备 } }hot:true启用HotModuleReplacementPlugin（HMR）
执行npm run start，在浏览器打开以后，修改div的背景颜色，只有改变的地方才发生变化，但是页面并没有刷新。
在demo2的src目录下新建number.js
修改index.js
import number from './number' number()运行npm run start，在浏览器中打开看结果，然后在number.js中修改内容，但是页面并没有显示修改后的内容
这是因为在引入js文件的时候，热模块替换的实现方式有点区别。
js要达到热模块替换的效果，得要if(module.hot){}这一部分代码，否则就算改了代码，页面不刷新，修改的地方在页面上页面变化。
css样式因为css-loader已经实现if(module.hot){}这一部分，所以不需要单独实现这一部分。
再次修改index.js
import number from './number' number() if(module.hot){ module.hot.accept('./number.js',function(){ number() document.body.removeChild(document.getElementById('number')) }) }运行npm run start，在浏览器中打开看结果，然后在number.js中修改内容，发现页面显示修改后的内容
Babel是一个广泛使用的转码器，可以将ES6代码转为ES5代码，从而在现有环境执行。
Babel总共分为三个阶段：解析（parse），转换（transform），生成（generate）。
Babel本身不具有任何转化功能，它把转化的功能都分解到一个个plugin里面。因此当我们不配置任何插件时，经过Babel输出的代码和输入是相同的。
Babel插件的使用
将插件的名字增加到配置文件中:项目根目录下创建.babelrc配置文件或是webapck.config.js中配置，一般都是在.babelrc中配置。
使用 npm install xxx 进行安装
Babel的配置文件是.babelrc，存放在项目的根目录下。使用Babel的第一步，就是配置这个文件。
该文件用来设置转码规则和插件，基本格式如下。
{ "presets": [], "plugins": [] }preset
preset（预设）就是一系列插件的集合@babel/preset-env包含所有ES6转译为ES5的插件集合
core-js
转换一些内置类(Promise, Symbols等等)和静态方法(Array.from等)。
@babel/core
是作为Babel的核心存在，Babel的核心api都在这个模块里面。
babel-loader
babel-loader在webpack中使用，是webpack和Babel之间的通讯桥梁
@babel/polyfill介绍
@babel/preset-env默认只转译js语法，而不转译新的API，比如Iterator、Generator、Set、Maps、Proxy、Reflect、Symbol、Promise等全局对象，以及一些定义在全局对象上的方法(比如Object.assign)都不会转译。这时就必须使用@babel/polyfill(内部集成了core-js和regenerator)。
使用时，在所有代码运行之前增加import "@babel/polyfill"
或者是在webpack.config.js入口配置
module.exports = { entry: ["@babel/polyfill", "./app/js"], }因此必须把@babel/polyfill作为dependencies而不是devDependencies
@babel/polyfill主要有两个缺点：
1.使用@babel/polyfill需要做些额外配置，实现打包的时候按需引入，否则会把@babel/polyfill全部注入代码中会导致打出来的包非常大。
2.@babel/polyfill会污染全局变量。
Babel7的一个重大变化就是npm package 名称的变化，把所有babel-*重命名为@babel/*，例如：
babel-polyfill重命名为@babel/polyfillbabel-preset-env重命名为@babel/preset-env首先实现对ES6语法的转译
在webpack4目录下新建demo３文件夹，将demo２目录下的所有东西复制到demo３中
安装babel-loader、 @babel/core、@babel/preset-env
npm i babel-loader -Dnpm i @babel/core -Dnpm i @babel/preset-env -Dbabel-loader@8需要安装@babel/core7.x版本。
在webpack.config.js配置
module.exports={ module: { rules:[ { test: /\.js$/, exclude: /node_modules/, use:{ loader: 'babel-loader', options:{ presets: [ ["@babel/preset-env",{ //targets：表示编译出的代码想要支持的浏览器版本 targets: { chrome: "67" } }] ] } } } ] } }执行npm run build或npx webpack就可以看到dist目录下的打包文件，但是只是将ES6的语法进行转译，并没有对ES6新API进行转译，所以我们需要配置@babel/polyfill解决这个问题。
安装@babel/polyfillnpm i @babel/polyfill --save
在index.js中引入@babel/polyfill
index.js
//index.js import '@babel/polyfill' let arr=[ new Promise(()=>{}), new Promise(()=>{}), 2 ] arr.map((item)=>{ console.log(item) })引入@babel/polyfill前，main.js的大小为29.5KB
引入@babel/polyfill后，main.js的大小为1MB
注意：以上对比都是在没有targets这个选项的情况下，因为有些浏览器几乎都支持ES6，在这种情况下，@babel/preset-env将不会对代码进行处理。
这是因为把@babel/polyfill对所有API的实现都注入到打包文件中，但是里面很多的API我们在代码中并没有用到，所以需要修改配置，按需引入对应的API。
修改webpack.config.js配置
添加"useBuiltIns": "usage"以后，需要安装core-js@2，并且添加"corejs": 2配置项，这时配置选项比较多，需要在项目根目录下新建.babelrc文件，在这个文件中配置。
.babelrc配置如下：
"useBuiltIns"属性值为"usage"时，会自动引入@babel/polyfill，必须保证已经安装了@babel/polyfill
"useBuiltIns"属性值为"usage"时，需要添加"corejs": 2配置项，否则报错，需要安装core-js
首先删掉index.js中的import '@babel/polyfill'
安装core-jsnpm i --save core-js@2或npm i --save core-js@3
{ "presets": [["@babel/preset-env",{ "useBuiltIns": "usage", //不需要把polly都打包到代码中，根据代码按需转译 // core-js@３和core-js@２二选一 //"corejs": 3, //npm i --save core-js@３ "corejs": 2 //npm i --save core-js@2 }]] }修改webpack.config.js，删除options对象
module.exports={ module: { rules:[ { test: /\.js$/, exclude: /node_modules/, loader: 'babel-loader' } ] } }执行npm run build，打包后的文件大小为165KB
但是，在开发类库或是第三方模块时不适合使用@babel/polyfill，所以接下来使用@babel/plugin-transform-runtime来解决这个问题。
@babel/plugin-transform-runtime、@babel/runtime和@babel/runtime-corejs2的用法
@babel/runtime-corejs2：是一个包含Babel modular runtime helpers和regenerator-runtime以及core-js的库。
@babel/runtime：是一个包含Babel modular runtime helpers和regenerator-runtime的库。
在配置项中corejs属性值为默认为false，如果需要将Promise等API进行转译，则需要设置属性值为2时，并且安装@babel/runtime-corejs2
安装：
npm i @babel/plugin-transform-runtime -Dnpm i --save @babel/runtimenpm i --save @babel/runtime-corejs2修改.babelrc文件
{ "plugins": [ ["@babel/plugin-transform-runtime",{ "helpers": true, "regenerator": true, "useESModules": false, "corejs": 2 }] ] }我们把presets配置项去掉了，然后npm run build打包，打开打包后的main.js查看，虽然把转译了Promise，但是ES6新语法并没被转译，例如：let没有被转译为var。
所以还是需要配置presets，因为"@babel/preset-env"包含了对所有ES6语法转译为ES5插件。
再次修改.babelrc文件
{ "presets": ["@babel/preset-env"], "plugins": [ ["@babel/plugin-transform-runtime",{ "helpers": true, "regenerator": true, "useESModules": false, "corejs": 2 }] ] }添加presets配置项，然后npm run build打包，打开打包后的main.js查看，可以看到let和箭头函数都被转译为ES5语法了。
首先，在webpack4目录下新建demo4文件夹，将demo3目录下的所有东西复制到demo4中
Tree Shaking可以用来剔除JavaScript中用不上的死代码。它依赖静态的ES6模块化语法，例如通过import和export导入导出。
需要注意的是要让Tree Shaking正常工作的前提是JavaScript代码必须采用ES6模块化语法，因为ES6模块化语法是静态的，这让Webpack可以简单的分析出哪些export的被import过了。
接下来配置Webpack让Tree Shaking生效
webpack4默认保留ES6模块化语句，并没有通过Babel将其转换 修改.babelrc文件为如下：
//.babelrc { "presets": [["@babel/preset-env",{ "useBuiltIns": "usage", "corejs": 2, "modules":false //关闭 Babel 的模块转换功能，保留原本的 ES6 模块化语法 //默认是auto，取值还可以是 amd, umd, systemjs, commonjs，auto等 }]] }修改webapck.config.js，添加
optimization: { usedExports: true }到module.exports{}中
module.exports={ mode: 'development', optimization: { //开发坏境使用tree shaking时加usedExports: true usedExports: true }, }还需通过package.json的"sideEffects"属性来告诉webpack哪些模块是可以忽略掉，如果没有则设置为false，来告知webpack，它可以安全地删除未用到的export。
修改package.json
{ "name": "your-project", "sideEffects": false }在demo4下的src新建math.js
index.js
//tree shaking import export import {cube} from './math.js' let component = () => { let element = document.createElement('pre') element.innerHTML = [ 'Hello webpack!', '2 cubed is equal to ' + cube(2) ].join('\n\n'); console.log(cube) return element; } document.body.appendChild(component());math.js
export let square= (x) => { console.log(x) return x * x; } export let cube = (x) => { console.log(x) return x * x * x; }运行npm run build，然后打开打包后的js文件:main.js找到下面这段文字
/*!*********************!*\ !*** ./src/math.js ***! \*********************/ /*! exports provided: square, cube */ /*! exports used: cube */ /***/从上面这段文字可以看出Tree Shaking生效了，但是在开发环境下，并没有把没有用的代码删掉，因为 环境下还需要对代码进行调试。
我们已经找出需要删除的“未引用代码(dead code)”，然而，不仅仅是要找出，还要删除它们。为此，我们需要将mode配置选项设置为production，将optimization对象删掉，修改devtool配置选项
webpack.config.js
module.exports = { mode: 'production', devtool: 'cheap-module-source-map' }运行npm run build，查看打包结果就可以看到没有用的代码被删掉了。
在webpack4下新建demo5，将demo4下的所有文件复制到demo5中
因为在不同的环境下，webpack的配置稍微有点区别，如果我们需要在不同的换将下切换，就得修改webpack配置，这是很麻烦而且还容易改错，所以我们需要把配置文件进行拆分。
在项目根目录下新建build文件夹，然后在build文件夹中新建webpack.dev.js、webpack.prod.js和webpack.base.js三个文件
webpack.dev.js：是开发环境webpack.prod.js：是生产环境webpack.base.js：是开发环境和生产环境都用到的配置
这几个文件之间的结合靠'webpack-merge'这个插件。
安装npm i webpack-merge -D
webpack.dev.js
//webpack.dev.js const webpack=require('webpack') const merge = require('webpack-merge') const baseConfig=require('./webpack.base') const devConfig={ mode: 'development', devtool: 'cheap-module-eval-source-map', plugins: [ new webpack.HotModuleReplacementPlugin() ], optimization: { usedExports: true }, devServer: { contentBase: './dist', // open: true, //自动打开浏览器 // port: 8080, hot: true, //启用webpack的热模块替换功能 //hotOnly: true //devServer.hot在没有页面刷新的情况下启用热模块替换作为构建失败时的后备 } } module.exports=merge(baseConfig,devConfig)webapck.prod.js
//webapck.prod.js const merge = require('webpack-merge') const baseConfig=require('./webpack.base') const prodConfig={ mode: 'production', devtool: 'cheap-module-source-map' } module.exports=merge(baseConfig,prodConfig)但是这两个文件还有大量重复的代码，新建webpack.base.js
//webpack.base.js const path = require('path') const htmlWebpackPlugin = require('html-webpack-plugin') const cleanWebpackPlugin = require('clean-webpack-plugin') module.exports={ entry: { main: './src/index.js' }, output: { filename: '[name].js', path: path.resolve(__dirname,'dist') }, module: { rules:[ { test: /\.(png|jpg|gif)$/, use: { loader: 'url-loader', options: { name: '[name].[ext]', outputPath: 'images/', limit: 2048 } } }, { test: /\.css$/, use:[ 'style-loader', 'css-loader', 'postcss-loader' ] }, { test: /\.scss$/, use:[ 'style-loader', { loader: 'css-loader', options: { importLoaders: 2, modules: true } }, 'sass-loader', 'postcss-loader' ] }, { test: /\.js$/, exclude: /node_modules/, loader: 'babel-loader' } ] }, plugins: [ new htmlWebpackPlugin({ template: './index.html' }), new cleanWebpackPlugin(), ] }修改package.json的script:
{ "scripts": { "dev": "webpack-dev-server --config ./build/webpack.dev.js", "build": "webpack --config ./build/webpack.prod.js" }, }开发环境：运行npm run dev，打开浏览器访问http://localhost:8080/就可以看到结果 生产环境：运行npm run build
webpack 4移除CommonsChunkPlugin，取而代之的是SplitChunksPlugin。下面介绍SplitChunksPlugin的用法。
在webpack4目录下新建demo6目录，将demo5目录下的所有文件都复制到demo6中。
安装 lodash
npm i lodash --save
在package.json添加
"scripts": { "dev-build": "webpack --config ./build/webpack.dev.js" }修改index.js
import _ from 'lodash' console.log(_.join(['lodash', 'babel', 'webpack'], '-'))运行npm run dev-build后，demo6目录结构如下
demo6 ├── demo6/build │ ├── demo6/build/webpack.base.js │ ├── demo6/build/webpack.dev.js │ └── demo6/build/webpack.prod.js ├── demo6/dist │ ├── demo6/dist/index.html │ └── demo6/dist/main.js ├── demo6/index.html ├── demo6/package.json ├── demo6/package-lock.json ├── demo6/postcss.config.js └── demo6/src └── demo6/src/index.jsdist目录下只有main.js一个js文件，lodash库也一起打包到main.js里面，这种情况下会导致文件变大，导致页面加载速度变慢，我们需要把第三库或是需要单独打包的代码给分割出来。
这时需要使用webpack4自带的插件SplitChunksPlugin，默认情况下它将只会影响按需加载的代码块
在webpack.config.js添加optimization.splitChunks.chunks
optimization: { splitChunks: { //chunks: all, async, initial. //async针对异步加载的chunk做切割，initial针对初始chunk，all针对所有chunk。 chunks: 'async' } }运行npm run dev-build后，打包后的代码并没有分割。
修改optimization.splitChunks.chunks为all
optimization: { splitChunks: { //chunks: all, async, initial. //async针对异步加载的chunk做切割，initial针对初始chunk，all针对所有chunk。 chunks: 'all' } }运行npm run dev-build后，demo6目录结构如下
demo6 ├── demo6/build │ ├── demo6/build/webpack.base.js │ ├── demo6/build/webpack.dev.js │ └── demo6/build/webpack.prod.js ├── demo6/dist │ ├── demo6/dist/index.html │ ├── demo6/dist/main.js │ └── demo6/dist/vendors~main.js ├── demo6/index.html ├── demo6/package.json ├── demo6/package-lock.json ├── demo6/postcss.config.js └── demo6/src └── demo6/src/index.js可以看到dist目录下多了vendors~main.js文件，说明SplitChunksPlugin插件生效了
接下来先看optimization.splitChunks的默认配置
module.exports = { //... optimization: { splitChunks: { chunks: 'async', minSize: 30000, maxSize: 0, minChunks: 1, maxAsyncRequests: 5, maxInitialRequests: 3, automaticNameDelimiter: '~', name: true, cacheGroups: { vendors: { test: /[\\/]node_modules[\\/]/, priority: -10 }, default: { minChunks: 2, priority: -20, reuseExistingChunk: true } } } } }chunks: 表示将对哪些块进行优化，可选async, initial, all，async对异步加载的模块进行分割，initial对初始模块，all对所有模块
minSize: 加载的模块不小于30kb才进行分割
minChunks: 生成的chunk，共享该模块的chunk必须不小于１时才分割
maxAsyncRequests：按需加载时的最大并行请求数
maxInitialRequests：入口处的最大并行请求数
automaticNameDelimiter：默认情况下，webpack将使用块的名称和名称生成名称（例如vendors~main.js）。此选项指定用于生成的名称的分隔符
name：生成chunk的名字，如果设成true，将根据模块和缓存组配置结合生成名称
cacheGroups： 缓存组可以继承和/或覆盖任何选项splitChunks.*; 但是test，priority并且reuseExistingChunk只能在高速缓存组级别配置。要禁用任何默认缓存组，请将其设置为false。
test：控制此缓存组选择的模块
priority：模块可以属于多个缓存组，模块则归于缓存组priority高的reuseExistingChunk: 如果当前块包含已拆分的模块，则将重用它而不是生成新的块。
从以上可以看出来，默认的配置只对异步加载的模块有效
修改index.js，异步加载lodash
function getComponent(){ return import('lodash').then(({default: _})=>{ var element=document.createElement('div') element.innerHTML=_.join(['lodash', 'babel', 'webpack'], '-') return element }) } getComponent().then(element=>{ document.body.appendChild(element) })这时运行npm run dev-build会报错，需要下载安装@babel/plugin-syntax-dynamic-importnpm i @babel/plugin-syntax-dynamic-import -D
在.babelrc中添加
"plugins": ["@babel/plugin-syntax-dynamic-import"]再次运行npm run dev-build，此时打包成功，目录结构如下
demo6 ├── demo6/build │ ├── demo6/build/webpack.base.js │ ├── demo6/build/webpack.dev.js │ └── demo6/build/webpack.prod.js ├── demo6/dist │ ├── demo6/dist/0.js │ ├── demo6/dist/index.html │ └── demo6/dist/main.js ├── demo6/index.html ├── demo6/package.json ├── demo6/package-lock.json ├── demo6/postcss.config.js └── demo6/src └── demo6/src/index.js可以看到dist目录下0.js，就是对lodash打包后的文件，有时我们希望能够改变0.js的名字
修改index.js，添加/* webpackChunkName:"lodash" */
function getComponent(){ return import(/* webpackChunkName:"lodash" */'lodash').then(({default: _})=>{ var element=document.createElement('div') element.innerHTML=_.join(['lodash', 'babel', 'webpack'], '-') return element }) } getComponent().then(element=>{ document.body.appendChild(element) })运行npm run dev-build，发现0.js变为vendors~lodash.js
也可以通过设置optimization.splitChunks.cacheGroups.vendors.name来修改打包后的文件名字
修改optimization.splitChunks配置
optimization: { splitChunks: { chunks: 'all', minSize: 30000, minChunks: 1, maxAsyncRequests: 5, maxInitialRequests: 3, automaticNameDelimiter: '~', name: true, cacheGroups: { vendors: { test: /[\\/]node_modules[\\/]/, priority: -10, name: 'vendors' }, default: { minChunks: 1, priority: -20, reuseExistingChunk: true } } } },运行npm run dev-build，发现打包后的文件名字变为vendors.js
以上就是SplitChunksPlugin的简单用法
详情请访问官网
MiniCssExtractPlugin插件将CSS提取到单独的文件中。它为每个包含CSS的JS文件创建一个CSS文件，在webpack 4才能使用
在webpack目录下新建demo7，将demo6下的所有文件都复制到demo7中，进入demo7
安装npm install --save-dev mini-css-extract-plugin
官网提示，这个插件应该在生产环境中使用，所以修改webpack的相关配置。
首先将webpack.base.js中对css和scss处理的loader配置分别复制粘贴(在webpack.base.js中删掉这一部分)到webpack.prod.js和webpack.dev.js中。
在webpack.prod.js中引入const miniCssExtractPlugin = require('mini-css-extract-plugin') 修改后的相关配置如下：
否则通过import './*.css'方式引入的css文件会被删除掉。
运行npm run build，我们就可以看到dist目录下，css文件被单独分割出来了。
官网还提供一个插件可以对css文件进行压缩
安装npm i optimize-css-assets-webpack-plugin -D
再次运行npm run build，打开打包后的css文件，就发现css文件被压缩了。
更具体的使用方法请看官网
代码都已经上传到github：github:webpack4
转载于:https://www.cnblogs.com/qfstudy/p/10775561.html
