从零搭建

最新推荐文章于 2022-06-28 09:32:40 发布

F_efforts

最新推荐文章于 2022-06-28 09:32:40 发布

阅读量251

点赞数

分类专栏：前端

本文链接：https://blog.csdn.net/F_efforts/article/details/108756871

版权

前端专栏收录该内容

6 篇文章 0 订阅

订阅专栏

开始

优雅webpack4

http://vlambda.com/wz_xetaQRp1gl.html

https://vue-loader-v14.vuejs.org/zh-cn/configurations/advanced.html

vue-cli直接搭建一个项目 不想从零开始

**、进入你的项目目录，创建一个基于 webpack 模板的新项目: vue init webpack 项目名**

说明：

Vue build ==> 打包方式，回车即可；

Install vue-router ==> 是否要安装 vue-router，项目中肯定要使用到所以Y 回车；

Use ESLint to lint your code ==> 是否需要 js 语法检测目前我们不需要所以 n 回车；

Set up unit tests ==> 是否安装单元测试工具目前我们不需要所以 n 回车；

Setup e2e tests with Nightwatch ==> 是否需要端到端测试工具目前我们不需要所以 n 回车；

1、build：构建脚本目录

1）build.js ==> 生产环境构建脚本；``

2）check-versions.js ==> 检查npm，node.js版本；

3）utils.js ==> 构建相关工具方法；

4）vue-loader.conf.js ==> 配置了css加载器以及编译css之后自动添加前缀；

5）webpack.base.conf.js ==> webpack基本配置；

6）webpack.dev.conf.js ==> webpack开发环境配置；

7）webpack.prod.conf.js ==> webpack生产环境配置；

2、config：项目配置

1）dev.env.js ==> 开发环境变量；

2）index.js ==> 项目配置文件；

3）prod.env.js ==> 生产环境变量；

3、node_modules：npm 加载的项目依赖模块

4、src：这里是我们要开发的目录，基本上要做的事情都在这个目录里。里面包含了几个目录及文件：

1）assets：资源目录，放置一些图片或者公共js、公共css。这里的资源会被webpack构建；

2）components：组件目录，我们写的组件就放在这个目录里面；

3）router：前端路由，我们需要配置的路由路径写在index.js里面；

4）App.vue：根组件；

5）main.js：入口js文件；

5、static：静态资源目录，如图片、字体等。不会被webpack构建

6、index.html：首页入口文件，可以添加一些 meta 信息等

7、package.json：npm包配置文件，定义了项目的npm脚本，依赖包等信息``

8、README.md：项目的说明文档，markdown 格式

9、.xxxx文件：这些是一些配置文件，包括语法配置，git配置等

初始化

npm init -Y

yarn add webpack -D

yarn add webpack-cli -D

yarn add webpack-dev-server -D webpack开发配置

yarn add webpack-merge -D 配置合并

创建相应文件

vueProject
  |-build
    |--weboack.base.js
    |--webpack.dev.js
    |--webpack.prod.js
  |-src
    |--index.js
    |--app.vue
  |-index.html

首先书写weboack.base.js文件，存放开发环境和生产环境通用配置

const path = require("path")

module.exports = {
    entry: {
        app: "./src/index.js"
    },

    plugins: [],
    module: {
        rules: [
            
        ]
    }
}

webpack.dev.js开发配置

const path = require("path")
const basic = require("./webpack.base")
const {merge} = require("webpack-merge")

module.exports = merge(basic,{
    mode:"development",
    devtool:"inline-source-map", //生产环境不用
    plugins:[],
    module:{
        rules:[]
    }
})

webpack.prod.js生产配置

const path = require("path")
const basic = require("./webpack.base")
const {merge} = require("webpack-merge")

module.exports = merge(basic,{
    mode:"production",// 生产环境，默认开启相关插件,可删除未引用代码，压缩代码等
    devtool:"#source-map",
    plugins:[],
    module:{
        rules:[]
    }
})

安装Vue

yarn add vue

**index.js**

import Vue from "vue"

import App from "./app.vue"

new Vue({
    el: '#app',
    render: h => h(App),
});

书写app.vue

<template>
    <div>
        hello world
    </div>
</template>

<script>
export default {
    name:"app"
}
</script>

<style lang="scss" scoped>

</style>

安装 node-sass sass-loader css-loader 用来编译css scss

注：可能yarn不能安装的话使用cnpm

index.htm;

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>前端从零搭建Vue2+Webpack4</title>
</head>
<body>
    <div id="app"></div>
</body>
</html>

初始化到此结束

开发环境下继续配置webpack

安装vue-template-compiler && html-webpack-plugin && vue-loader

编译Vue模板以及开发环境下生成html

webpack.dev.js

plugins: [
        new HtmlWebpackPlugin()
    ],

webpack.base.js

const VueLoaderPlugin = require('vue-loader/lib/plugin');

+plugins: [
 +       new VueLoaderPlugin()
    ],
    
 module: {
        rules: [
+            {
+                test: /\.vue$/,
+                loader: 'vue-loader'
+           }
        ]
    }

package.json

"scripts": {
  "start": "webpack-dev-server --hot --open --config build/webpack.dev.js",
  "build": "webpack --config build/webpack.prod.js"
}

此时可以启动一个网页为hello world为主题的一个页面

生产环境继续配置webpack

const path = require("path")
const basic = require("./webpack.base")
const { merge } = require("webpack-merge")
const HtmlWebpackPlugin = require("html-webpack-plugin")
module.exports = merge(basic, {
    mode: "production",// 生产环境，默认开启相关插件,可删除未引用代码，压缩代码等
    devtool: "#source-map",
    plugins: [
+        new HtmlWebpackPlugin({
+           filename:path.resolve(__dirname, +'../dist/index.html'),
+            template: 'index.html',
+        })
    ],
    module: {
        rules: []
    },
+    output: {
+        filename: '[name].[contenthash].js', //contenthash 若文件内容无变化，则contenthash 名称不变
+        path: path.resolve(__dirname, '../dist')
    },
})

至此打包的html文件没有任何图片 css

Vue开发

Vue动态路由

见其他markdown文档

路由配置

_import_development.js

module.exports = file => require('@/views/' + file + '.vue').default // vue-loader at least v13.0.0+

_import_production.js

module.exports = file => () => import('@/views/' + file + '.vue')

import Vue from "vue"

import Router from "vue-router"

const _import = require('./_import_' + process.env.NODE_ENV)
Vue.use(Router)
// 不需要权限都能看到的
export const constantRouterMap = [
    {
        path: '/login',
        component: _import('login/index'),
        hidden: true
    },
    {
        path:"/",
        component:_import("home/index")
    }
]

const router = new Router({
    // mode: 'history', // require service support
    mode: 'hash',
    scrollBehavior: () => ({
        y: 0
    }),
    routes: constantRouterMap
})
export default router
// 需要权限的路由表
export const asyncRouterMap = [

]

base.config完整配置

配置别名

function resolve(dir) {
    return path.join(__dirname, '..', dir)
}

module.exports={
resolve: {
        extensions: ['.js', '.vue', '.json'],
        alias: {

            '@': resolve('src'),
        }
    },
}

scss css转换

参考开发环境配置rules

JS ES6->ES5

cnpm install -D babel-loader @babel/core @babel/preset-env

{
                test: /\.js$/,
                loader: 'babel-loader?cacheDirectory',
                include: [resolve('src')]
            },
            
            或者
            
            // -- babel8.0
            {
      test: /\.m?js$/,
      exclude: /(node_modules|bower_components)/,
      use: {
        loader: 'babel-loader?cacheDirectory',支持缓存
        options: {
          presets: ['@babel/preset-env']
        }
      }
    }

https://segmentfault.com/a/1190000017898866?utm_source=tag-newest

注“在webpack打包的时候，可以在js文件中混用require和export。但是不能混用import 以及module.exports。

解决： npm install babel-plugin-transform-es2015-modules-commonjs

然后在 babelrc文件中配置

{ “plugins”: [“transform-es2015-modules-commonjs”] }

分离css 写在生产环境下开发环境不支持热更新

webpack3

cnpm i extract-text-webpack-plugin@next -D  // 加上@next是为了安装最新的，否则会出错

const ExtractTextPlugin = require('extract-text-webpack-plugin') //引入分离插件

plugins: [
        new VueLoaderPlugin(),
+        new ExtractTextPlugin('css/index.css') // 将css分离到/dist文件夹下的css文件夹中的index.css
    ],

webpack4

cnpm install mini-css-extract-plugin -D 

- { loader: 'style-loader' }
+    MiniCssExtractPlugin.loader


new MiniCssExtractPlugin({
      filename: devMode ? '[name].css' : 'css/[name].[hash:7].css',
            chunkFilename: devMode ? '[id].css' : 'css/[id].[hash:7].css',
            ignoreOrder: false
    }),

**3.消除冗余css **暂不使用

cnpm i purifycss-webpack purify-css glob -D
安装完上述三个模块后，因为正常来说是在生产环境中优化代码，所以我们应该是在webpack.prod.js文件中进行配置，引入clean-webpack-plugin及glob插件并使用它们：

const PurifyCssWebpack = require('purifycss-webpack'); // 引入PurifyCssWebpack插件
const glob = require('glob');  // 引入glob模块,用于扫描全部html文件中所引用的css



new CleanWebpackPlugin(['dist']),  // 所要清理的文件夹名称
        new PurifyCssWebpack({
            paths: glob.sync(path.join(__dirname, 'src/*.html')) // 同步扫描所有html文件中所引用的css
        })

postcss-pxtorem

{
              loader: 'postcss-loader',
              options: {
                ident: 'postcss',
                plugins: [
                  require('postcss-cssnext')(),
                  require('cssnano')(),
                  require('postcss-pxtorem')({
                    rootValue: 100,
                    propWhiteList: []
                  })
                ]
              }
            },











require('postcss-pxtorem')({
  rootValue: 75,
  unitPrecision: 5,
  propList: ['*'],
  selectorBlackList: [],
  replace: true,
  mediaQuery: false,
  minPixelValue: 12
})

[ 复制代码 ](javascript:void(0)😉

假设设计稿750宽;
rootValue为75，说是对根元素大小进行设置.
unitPrecision为5,是转换成rem后保留的小数点位数.
selectorBlackList则是一个对css选择器进行过滤的数组，比如你设置为[‘fs’]，那例如fs-xl类名，里面有关px的样式将不被转换，
这里也支持正则写法。
minPixelValue的选项，我设置了12，意思是所有小于12px的样式都不被转换.
propList是一个存储哪些将被转换的属性列表，这里设置为[’’]全部，假设需要仅对边框进行设置，可以写[’’, ‘!border*’]意思是排除带有border的属性.

开发环境完整配置

1、scss css转换放在base.config也可

// use的顺序从右往左

module: {
        rules: [
            {
                test: /\.(sc|sa|c)ss$/,

                use: [
                    { loader: 'style-loader' }, {
                    loader: 'css-loader', options: {
                        sourceMap: true //为了映射文件
                    }
                }, {
                    loader: "sass-loader", options: {
                        sourceMap: true
                    }
                }]

            }
        ]
    }

postcss 增加前缀等https://segmentfault.com/a/1190000004592944

安装好这两个模块后，在项目根目录下新建postcss.config.js文件:
module.exports = {
    parser: 'postcss-scss',
    plugins: [
        require('autoprefixer')  // 引用autoprefixer模块
    ]
}

修改webpack.common.js文件中的css-loader配置：

{loader: 'postcss-loader'，options: {
                        sourceMap: true,
                        config: {
                            path: 'postcss.config.js'
                        }
                    }} // 使用postcss-loader

package.json
  "browserslist": [
    "defaults",
    "not ie < 11",
    "last 2 versions",
    "> 1%",
    "iOS 7",
    "last 3 iOS versions"
  ]

图片转换

 {
                test: /\.(png|jpg|svg|gif)$/,
                use: [
                    {
                        loader: 'url-loader',
                        options: {
                            limit: 1000,  // 限制只有小于1kb的图片才转为base64，例子图片为1.47kb,所以不会被转化
                            outputPath: 'images'  // 设置打包后图片存放的文件夹名称
                        }
                    }
                ]
            },

生产环境完整配置

1、 CleanWebpackPlugin 在每次构建前清理/dist文件夹

npm install clean-webpack-plugin --save-dev

+ const CleanWebpackPlugin = require('clean-webpack-plugin');

new CleanWebpackPlugin(),

css 压缩： optimize-css-assets-webpack-plugin

 npm i optimize-css-assets-webpack-plugin -D
 
 2、引入及配置
 // webpack.pord.config.js
 const OptimizeCSSAssetsPlugin = require('optimize-css-assets-webpack-plugin')

// 普通压缩
 plugins: [ 
   new OptimizeCSSAssetsPlugin ()
 ]

// 使用cssnano配置规则
// 先 npm i cssnano -D
plugins: [ 
  new OptimizeCSSAssetsPlugin ({
    // 默认是全部的CSS都压缩，该字段可以指定某些要处理的文件
    assetNameRegExp: /\.(sa|sc|c)ss$/g, 
    // 指定一个优化css的处理器，默认cssnano
    cssProcessor: require('cssnano'),
   
    cssProcessorPluginOptions: {
      preset: [  'default', {
          discardComments: { removeAll: true}, //对注释的处理
          normalizeUnicode: false // 建议false,否则在使用unicode-range的时候会产生乱码
      }]
    },
    canPrint: true  // 是否打印编译过程中的日志
  })
]
📢注意，这样配置会存在只有css压缩的问题，这时webpack4原本自己配置好的js压缩会无效 ，需要重新配置UglifyJsPlugin（用于压缩js,webpack4内置了）一下


   optimization: {
     minimizer: [
        new UglifyJsPlugin({
         cache: true, // Boolean/String,字符串即是缓存文件存放的路径
         parallel: true, // 启用多线程并行运行提高编译速度
         sourceMap: true
        /*
          uglifyOptions: {
            output: {
              comments: false  // 删掉所有注释
            }，
            compress: {
                warning: false, // 插件在进行删除一些无用的代码时不提示警告
                drop_console: true // 过滤console,即使写了console,线上也不显示
            }
          } */
       }),
       new OptimizeCSSAssetsPlugin({})
     ]
   }

作者：前端girl吖
链接：https://www.jianshu.com/p/dd9afa5c4d0f
来源：简书
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。

css转换

{
                test: /\.(sc|sa|c)ss$/,
                use: [
                    // { loader: 'style-loader' }
                    {
                        loader: MiniCssExtractPlugin.loader
                    }, {
                        loader: 'css-loader', 
                        options: {
                            sourceMap: true
                        }
                    }, {
                        loader: 'postcss-loader',
                        options: {
                            sourceMap: true,
                            config: {
                                path: 'postcss.config.js'
                            }
                        }
                    }, // 使用postcss-loader 
                    {
                        loader: "sass-loader", 
                        options: {
                            sourceMap: true
                        }
                    }]
            }

拓展相关功能

一些 css loader

npm install css-loader style-loader less less-loader node-sass sass-loader postcss-loader autoprefixer --save -dev
1

图片 loader

npm i file-loader --save-dev
1

我的安装版本

"autoprefixer": "^9.7.3",
"css-loader": "^3.4.0",
"file-loader": "^5.0.2",
"less": "^3.10.3",
"less-loader": "^5.0.0",
"node-sass": "^4.13.0",
"postcss-loader": "^3.0.0",
"sass-loader": "^8.0.0",
"style-loader": "^1.1.2",
123456789

在根目录下创建== postcss.config.js ==文件

// 自动添加css兼容属性
const autoprefixer = require('autoprefixer');
module.exports = {
  plugin: [
    autoprefixer
  ]
}
1234567

在== webpack.base.js ==文件中添加 loader 代码

module.exports = {
  entry: './src/index.js',
  module: {
    rules: [
      {
        test: /\.(sa|sc|c)ss$/,
        use: ['style-loader', 'css-loader', 'postcss-loader', 'sass-loader']
      },
      {
        test: /\.less$/,
        use: ['style-loader', 'css-loader', 'postcss-loader', 'less-loader']
      },
      {
        test: /\.(png|svg|jpg|gif)$/,
        use: [
          {
            loader: 'file-loader',
            options: {
              limit: 5000,
              // 分离图片至imgs文件夹
              name: 'imgs/[name].[ext]'
            }
          },
          // 图片压缩
          {
            loader: 'image-webpack-loader',
            options: {
              mozjpeg: {
                progressive: true,
                quality: 65
              },
              optipng: {
                enabled: false
              },
              pngquant: {
                quality: '65-90',
                speed: 4
              },
              gifsicle: {
                interlaced: false
              }
            }
          }
        ]
      }
    ]
  },
}
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748

打包优化（修改 webpack.prod.js）

处理每次重新打包，dist 目录文件夹文件没有清除的情况
安装插件 clean-webpack-plugin

npm install clean-webpack-plugin --save -dev
1
const { CleanWebpackPlugin } = require('clean-webpack-plugin')
plugins: [
  new CleanWebpackPlugin(),
],

12345

分离 css
webpack4 中使用 mini-css-extract-plugin 插件来分离 css。
安装插件 mini-css-extract-plugin

npm install mini-css-extract-plugin --save -dev
1
const MiniCssExtractPlugin = require('mini-css-extract-plugin')
module.exports = merge(common, {
  module: {
    rules: [
      {
        test: /\.css$/,
        use: [MiniCssExtractPlugin.loader, 'css-loader']
      },
      {
        test: /\.less$/,
        use: [
          {
            loader: MiniCssExtractPlugin.loader,
            options: {
              publicPath: '../'
            }
          },
          'css-loader',
          'postcss-loader',
          'less-loader'
        ]
      },
    ]
  },
  plugins: [
    new MiniCssExtractPlugin({
      filename: 'css/[name].[hash].css',
      chunkFilename: 'css/[id].[hash].css'
    })
  ],
})
12345678910111213141516171819202122232425262728293031

图片压缩
安装插件 image-webpack-loader

npm install image-webpack-loader --save -dev
1
{
    test: /\.(png|svg|jpg|gif)$/,
    use: [
      {
        loader: 'file-loader',
        options: {
          limit: 5000,
          name: "imgs/[hash].[ext]",
        }
      },
      // 图片压缩
      {
        loader: 'image-webpack-loader',
        options: {
          //   bypassOnDebug: true,
          mozjpeg: {
            progressive: true,
            quality: 65
          },
          optipng: {
            enabled: false,
          },
          pngquant: {
            quality: '65-90',
            speed: 4
          },
          gifsicle: {
            interlaced: false,
          }
        },
      }
}
1234567891011121314151617181920212223242526272829303132

使用 Happypack 多进程加快编译速度
Happypack 的作用是将文件解析任务分解成多个子进程并发执行，子进程处理完成任务后再将结果发送给主线程。
Happypack 开发和生产环境都可以用到，在 wenpack.base 中修改
安装插件 happypack

npm install happypack --save -dev
1
const HappyPack = require('happypack')
const os = require('os')
const happyThreadPool = HappyPack.ThreadPool({ size: os.cpus().length })
rules: [
  {
    test: /\.js$/,
    loader: 'happypack/loader?id=happyBabel',
    exclude: /node_modules/
  },
]

plugins: [
  new HappyPack({
    //用id来标识 happypack处理类文件
    id: 'happyBabel',
    //如何处理 用法和loader 的配置一样
    loaders: [
      {
        loader: 'babel-loader?cacheDirectory=true'
      }
    ],
    //共享进程池
    threadPool: happyThreadPool,
    //允许 HappyPack 输出日志
    verbose: true
  })
]
123456789101112131415161718192021222324252627

代码分离，一些不常变化的文件(webpack.prod.js 修改)

optimization: {
    splitChunks: {
      chunks: 'all',
      cacheGroups: {
        vendor: {
          name: 'vendor',
          test: /[\\/]node_modules[\\/]/,
          priority: 10,
          chunks: 'initial' // 只打包初始时依赖的第三方
        }
      }
    }
  }
12345678910111213

压缩 css 和 js

const OptimizeCSSAssetsPlugin = require('optimize-css-assets-webpack-plugin')
const TerserJSPlugin = require('terser-webpack-plugin')
optimization: {
  minimizer: [
    // 压缩js
    new TerserJSPlugin({}),
    // 压缩css
    new OptimizeCSSAssetsPlugin({})
  ]
  },
12345678910

vue 相关开发

支持 vue-router 路由懒加载
安装 babel 插件

npm install --save-dev @babel/plugin-syntax-dynamic-import
1

新建.babelrc 文件

{
  "plugins": ["@babel/plugin-syntax-dynamic-import"]
}

拓展webpack中需要的配置

Html-webpack-plugin

不配置任何选项的html-webpack-plugin插件，他会默认将webpack中的entry配置所有入口thunk和extract-text-webpack-plugin抽取的css样式都插入到文件指定的位置。

html-webpack-plugin配置项

template: path.join(__dirname, 'default_index.ejs'),
    filename: 'index.html',
    hash: false,
    inject: true,
    compile: true,
    favicon: false,
    minify: false,
    cache: true,
    showErrors: true,
    chunks: 'all',
    excludeChunks: [],
    title: 'Webpack App',
    xhtml: false

title: 生成的html文档的标题。配置该项，它并不会替换指定模板文件中的title元素的内容，除非html模板文件中使用了模板引擎语法来获取该配置项值，如下ejs模板语法形式

<title>{%= o.htmlWebpackPlugin.options.title %}</title>

filename：输出文件的文件名称，默认为index.html，不配置就是该文件名；此外，还可以为输出文件指定目录位置（例如’html/index.html’）

1、filename配置的html文件目录是相对于webpackConfig.output.path路径而言的，不是相对于当前项目目录结构的。
2、指定生成的html文件内容中的link和script路径是相对于生成目录下的，写路径的时候请写生成目录下的相对路径。

template: 本地模板文件的位置，支持加载器(如handlebars、ejs、undersore、html等)



1、template配置项在html文件使用`file-loader`时，其所指定的位置找不到，导致生成的html文件内容不是期望的内容。
2、为template指定的模板文件没有指定**任何loader的话**，默认使用`ejs-loader`。如`template: './index.html'`，若没有为`.html`指定任何loader就使用`ejs-loader

templateContent: string|function，可以指定模板的内容，不能与template共存。配置值为function时，可以直接返回html字符串，也可以异步调用返回html字符串。

inject：向template或者templateContent中注入所有静态资源，不同的配置值注入的位置不经相同。

1、true或者body：所有JavaScript资源插入到body元素的底部
2、head: 所有JavaScript资源插入到head元素中
3、false： 所有静态资源css和JavaScript都不会注入到模板文件中

favicon: 添加特定favicon路径到输出的html文档中，这个同title配置项，需要在模板中动态获取其路径值

hash：true|false，是否为所有注入的静态资源添加webpack每次编译产生的唯一hash值，添加hash形式如下所示

chunks：允许插入到模板中的一些chunk，不配置此项默认会将entry中所有的thunk注入到模板中。在配置多个页面时，每个页面注入的thunk应该是不相同的，需要通过该配置为不同页面注入不同的thunk；

excludeChunks: 这个与chunks配置项正好相反，用来配置不允许注入的thunk。

chunksSortMode: none | auto| function，默认auto；允许指定的thunk在插入到html文档前进行排序。
>function值可以指定具体排序规则；auto基于thunk的id进行排序； none就是不排序

xhtml: true|fasle, 默认false；是否渲染link为自闭合的标签，true则为自闭合标签

cache: true|fasle, 默认true；如果为true表示在对应的thunk文件修改后就会emit文件

showErrors: true|false，默认true；是否将错误信息输出到html页面中。这个很有用，在生成html文件的过程中有错误信息，输出到页面就能看到错误相关信息便于调试。

minify: {…}|false；传递 html-minifier 选项给 minify 输出，false就是不使用html压缩，minify具体配置参数请点击html-minifier

spiltChunksPlugin

};

参数	默认	说明	值
chunks	async	设置代码分割类型,和`cacheGroups`配置配合使用	`async` 对异步代码分割 `all` 对同步和异步代码分割
minSize	30000(30kb)	当引入的模块大于30kb才会做代码分割
maxSize	0	当引入的模块大于`maxSize`时，会尝试对引入的模块进行二次拆分，一般不用配置
minChunks	1	当一个模块被至少引入1次，才会做代码分割
maxAsyncRequests	5	当引入模块10个时，只会将前5个模块进行打包
maxInitialRequests	3	入口文件引入的模块如果超过3个，只会将前3个模块做代码分割
automaticNameDelimiter	`~`	文件连接符
name	true	拆分块的名称，让`cacheGroups`里面的名字有效
cacheGroups	{}	对符合代码拆分的模块进行一个分类

cacheGroups参数

参数	类型	说明	值
priority	number	有限权，当一个模块都符合cacheGroups分组条件，将按照优先权进行分组，priority值越大，优先权越高	-10
filename	String\|Function	拆分的名称，一般不设置，默认生成`vendors~mian`。`vendors`分组名称，`~`连接符，`main`引入模块的入口文件
reuseExistingChunk	boolean	如果当前块包含已从主束拆分的模块，则将重用它而不是生成新的块。比如 import a from ‘A’ import b from 'B’在打包时候，按照打包顺序也会将`b`打包进`a`模块，但是在`a`打包之前，如果已经将`b`模块进行过打包,那么就不会将`b`模块在打包到`a`模块中
test	function (module, chunk) \| RegExp \| string	控制此缓存组选择的模块。`test:/[\\/]node_modules[\\/]/`必须要在node_modules模块在才可以
enforce	boolean	将对 splitChunks.minSize splitChunks.minChunks splitChunks.maxAsyncRequests splitChunks.maxInitialRequests 配置忽略

作者：瓦力博客
链接：https://www.jianshu.com/p/6fc4c5726762
来源：简书
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。

babel-polyfill

在网页需要向低版本兼容时，如IE不支持promise等新特性，我们仅仅使用babel进行es5转换是不够的，还需要把这些新特性进行转换

require("@babel-polyfill")或者import（）

base.config

entry: {
        app: ['@babel/polyfill',"./src/index.js"]
        // app: "./src/index.js"
    },

webpack-bundle-analyzer

我们再安装一个 webpack-bundle-analyzer，这个插件会清晰的展示出打包后的各个bundle所依赖的模块：

npm i webpack-bundle-analyzer -D

const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin

使用，在plugins数组中添加即可：

new BundleAnalyzerPlugin()

图片压缩

在url-loader中使用图片压缩loader

copyWebpackplugin

webpack问题

TerserPlugin与UngilfyJSPlugin

// 压缩代码
        new TerserPlugin({
            terserOptions: {
            compress: {
              
              drop_debugger: true,//关闭debug
              drop_console: true,//关闭console
            }
          },
          sourceMap: config.build.productionSourceMap,
          parallel: true
        }),

注： unglifyJsPlugin 2.0版本不能删除打印的日志用teser替换否则也会报错

                 | 将对 splitChunks.minSize splitChunks.minChunks splitChunks.maxAsyncRequests  splitChunks.maxInitialRequests 配置忽略 |      |