~

optimization: { splitChunks: { chunks: 'all', minSize: 30 * 1024, // 大于30kb的才会被分割 maxSize: 0, // 最大没有限制 minChunks: 1, // 要提取的chunk最少被引用1次 maxAsyncRequests: 5, // 按需加载时并行加载的文件的最大数量 maxInitialRequests: 3, .

devServer: { // 运行代码的目录 contentBase: resolve(__dirname, 'build'), // 监视contentBase目录下的所有文件，一旦有变化就会reload watchContentBase: true, watchOptions:{ // 忽略文件 ignored: /node_modules/ }, // 启动gzip压缩 compress: true...

resolve: 解析模块规则resolve: { // 配置解析模块路径别名，优点：简写路径，缺点：路径没有提示 // 'src/css/index.css' -> '$css/index.css' alias: { $css: resolve(__dirname, 'src/css') }, // 配置省略文件路径的后缀名 'xxx.js'->'xxx' // 使用这个配置时切记不可以起名字相同的文件，比如index.js

module: { rules: [ // loader配置 { test: '/\.css$/', // 多个loader用use use: ['style-loader', 'css-loader'] }, { test: '/\.js$/', // 单个loader用loader loa.

output: { // 文件名称，可指定目录 filename: 'js/[name].js', // 输出文件目录，将来所有资源输出的公共目录，所有资源都在此文件夹下 path: resolve(__dirname, 'build'), // 所有资源引入时的公共前缀 img/a.jpg -> /img/a.jpg（用于生产环境） publicPath: '/', // 设置非入口chunk的名称（入口chunk就是entry配置的文件，.

entry：入口起点支持三种格式：1、string，单入口entry: './src/index.js'打包形成一个chunk，输出一个bundle文件，此时chunk的名称默认是main2、array：多入口entry: ['./src/index.js', './src/add.js']所有入口文件最终只会形成一个chunk，输出去只有一个bundle文件，此时chunk的名称默认是main（会将add.js打包进index.js中）用途： 在HMR功能中让html热

1.lazy loading懒加载：对js进行懒加载现有两个js文件，index.js和test.js,当点击按钮的时候再加载test.js文件，预加载：prefetch,会在使用之前提前加载js文件页面初始化时network中可以看到加载了test.js文件，点击按钮的时候会读取缓存，重新加载js文件那么疑问来了，既然预加载会直接加载js文件，为什么还要放在函数里呢，和被注释掉的代码有什么却别呢？预加载：会在浏览器加载完其他文件后，空闲的时候再偷偷加载文件，相对于懒加载的好

1、tree shaking：移除 JavaScript 上下文中的未引用代码(dead-code)，减少代码体积。你可以将应用程序想象成一棵树。绿色表示实际用到的 source code(源码) 和 library(库)，是树上活的树叶。灰色表示未引用代码，是秋天树上枯萎的树叶。为了除去死去的树叶，你必须摇动这棵树，使它们落下。使用：使用 ES2015 模块语法（即import和export）。 确保没有编译器将您的 ES2015 模块语法转换为 CommonJS 的（顺带一提，这是现...

1.HMR：模块热替换【从 webpack-dev-server v4.0.0 开始，热模块替换是默认开启的。】作用：一个模块发生变化，只会重新打包这一个模块，而不会打包所有模块。hot: true2.source-map:一种提供源代码到构建后代码的映射技术（方便调试）devtool: 'source-map'[inlune-| hidden-| eval-][nosources-][cheap- [module-]]source-map内联：没有生成文件，构建速度更快外部

方法一：使用插件：babel-loader @babel/core @babel/preset-env缺点：只能处理基本的js兼容性问题，Promise等高级语法就不能转换方法二：使用插件：@babel/polyfill （安装后导入即可）缺点：这个插件会将所有的兼容性代码全部引入，会导致打包后文件体积变大方法三：使用插件：core-js，按需加载所以可以选择方法一 + 方法三来处理js兼容性问题，代码如下：module: { rules: [ {

1.首先需要在package.json中添加以下代码，后续会用到 "browserslist": { "development": [ "last 1 chrome version", "last 1 firefox version", "last 1 safari version" ], "production": [ ">0.2%", "not dead", "not op_mini all"

1.webpack的由来由于浏览器解析不了es6及以上的语法，无法编译less/sacc等，所以我们需要各种插件去es6编译es5、将less编译成css，比较杂乱，所以就有了webpack将这些插件组合在一起2.webpack的概念webpack是一种前端资源构建工具，一个静态模块打包器举个例子：vue中的入口文件会导入jquery，less文件等 ，将这些导入形成依赖关系图，打包后输出3.webpack的5个核心概念a.entry入口入口指示webpack以哪个文件为