2022-07-21 14:17:35

vue-cli3搭建完整项目之webpack配置

前面篇介绍了项目初始化，下面就要开始对项目webpack进行配置，由于vue-cli3将webpack的基础配置全部内嵌了，这就导致我们初始化项目完成之后发现原先的webpack的config配置全部都消失不见了，那该怎么办呢？别慌，vue-cli3早就考虑到了这一点，它预留了一个vue.config.js的js文件供我们对webpack进行自定义配置。

vue.config.js官方配置指南

一、在项目根目录下新建vue.config.js文件与package.json同级

下面是我的vue.config.js文件,里面有详细的注释，这里不再赘述

const path=require('path')

module.exports={
  publicPath:'./',// 基本路径
  outputDir:'dist',// 输出文件目录
  lintOnSave:false,// eslint-loader 是否在保存的时候检查// see https://github.com/vuejs/vue-cli/blob/dev/docs/webpack.md// webpack配置
  chainWebpack:(config)=>{},
  configureWebpack:(config)=>{if(process.env.NODE_ENV==='production'){// 为生产环境修改配置...
      config.mode='production'}else{// 为开发环境修改配置...
      config.mode='development'}
    Object.assign(config,{// 开发生产共同配置
      resolve:{
        alias:{'@': path.resolve(__dirname,'./src'),'@c': path.resolve(__dirname,'./src/components'),'@p': path.resolve(__dirname,'./src/pages')}// 别名配置}})},
  productionSourceMap:false,// 生产环境是否生成 sourceMap 文件// css相关配置
  css:{
    extract:true,// 是否使用css分离插件 ExtractTextPlugin
    sourceMap:false,// 开启 CSS source maps?
    loaderOptions:{
      css:{},// 这里的选项会传递给 css-loader
      postcss:{}// 这里的选项会传递给 postcss-loader},// css预设器配置项 详见https://cli.vuejs.org/zh/config/#css-loaderoptions
    modules:false// 启用 CSS modules for all css / pre-processor files.},
  parallel:require('os').cpus().length>1,// 是否为 Babel 或 TypeScript 使用 thread-loader。该选项在系统的 CPU 有多于一个内核时自动启用，仅作用于生产构建。
  pwa:{},// PWA 插件相关配置 see https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-pwa// webpack-dev-server 相关配置
  devServer:{
    open: process.platform==='darwin',
    host:'0.0.0.0',// 允许外部ip访问
    port:8022,// 端口
    https:false,// 启用https
    overlay:{
      warnings:true,
      errors:true},// 错误、警告在页面弹出
    proxy:{'/api':{
        target:'http://www.baidu.com/api',
        changeOrigin:true,// 允许websockets跨域// ws: true,
        pathRewrite:{'^/api':''}}}// 代理转发配置，用于调试环境},// 第三方插件配置
  pluginOptions:{}}

二、优化打包chunk-vendors.js文件体积过大

当我们运行项目并且打包的时候，会发现chunk-vendors.js这个文件非常大，那是因为webpack将所有的依赖全都压缩到了这个文件里面，这时我们可以将其拆分，将所有的依赖都打包成单独的js。

方案一：利用splitChunks将每个依赖包单独打包，在生产环境下配置，代码如下

configureWebpack:(config)=>{if(process.env.NODE_ENV==='production'){// 为生产环境修改配置...
      config.mode='production'// 将每个依赖包打包成单独的js文件let optimization={
        runtimeChunk:'single',
        splitChunks:{
          chunks:'all',
          maxInitialRequests:Infinity,
          minSize:20000,// 依赖包超过20000bit将被单独打包
          cacheGroups:{
            vendor:{
              test:/[\\/]node_modules[\\/]/,name(module){// get the name. E.g. node_modules/packageName/not/this/part.js// or node_modules/packageNameconst packageName= module.context.match(/[\\/]node_modules[\\/](.*?)([\\/]|$)/)[1]// npm package names are URL-safe, but some servers don't like @ symbolsreturn`npm.${packageName.replace('@','')}`}}}}}
      Object.assign(config,{
        optimization})}else{// 为开发环境修改配置...
      config.mode='development'}
    Object.assign(config,{// 开发生产共同配置
      resolve:{
        alias:{'@': path.resolve(__dirname,'./src'),'@c': path.resolve(__dirname,'./src/components'),'@p': path.resolve(__dirname,'./src/pages')}// 别名配置}})}

方案二、利用DllPlugin和DllReferencePlugin将依赖包打包成外部文件在index中引入

在package.json中新建library,用于存储即将要打包的依赖包名和打包后的文件名

{..."name":"demo-cli3","version":"1.0.0","version_lib":"1.0.0","library":{"lib_v1_0":["jquery/dist/jquery.min.js"],"vueBucket_v1_2":["vue-router","vuex"]},...}

创建webpack.dll.config.js文件，代码如下

const path=require('path')const webpack=require('webpack')const{library}=require('./package.json')// const assetsSubDirectory = process.env.NODE_ENV === 'production'//   ? build.assetsSubDirectory : dev.assetsSubDirectorylet{ version_lib}=require('./package.json');
version_lib= version_lib.replace(/\./g,'_');
module.exports={
  entry: library,
  output:{
    path: path.resolve(__dirname,'./libs/package/js'),
    filename:`[name].${version_lib}.dll.js`,
    library:'[name]_library'},
  module:{
    rules:[{
        test:/\.vue$/,
        loader:'vue-loader'},{
        test:/\.js$/,
        loader:'babel-loader',
        exclude:/node_modules/}]},
  optimization:{
    minimizer:[newUglifyPlugin({
        uglifyOptions:{
          warnings:false,
          compress:{
            drop_console:true,// console
            drop_debugger:false,
            pure_funcs:['console.log']// 移除console}}})]},
  plugins:[newwebpack.optimize.ModuleConcatenationPlugin(),newwebpack.ContextReplacementPlugin(/moment[\/\\]locale$/,/zh-cn|en-gb/),newwebpack.DllPlugin({
      path: path.resolve(__dirname,'./libs/package/json','[name].manifest.json'),
      name:'[name]_library',
      context: process.cwd()})]}

在vue.config.js中配置DllReferencePlugin

let{ version, version_lib, openGzip,library}=require('./package.json');...
module.exports={
  configureWebpack:(config)=>{if(process.env.NODE_ENV==='production'){// 为生产环境修改配置...
      config.mode='production';...
      Object.assign(config,{...
        plugins:[...config.plugins,...Object.keys(library).map(name=>{returnnewwebpack.DllReferencePlugin({
              context: process.cwd(),
              manifest:require(`./libs/package/json/${name}.manifest.json`),})})]});...}else{// 为开发环境修改配置...
      config.mode='development';}...},}...

将打包好的js自动添加进index.html中

下载add-asset-html-webpack-plugin

npm install--save-dev add-asset-html-webpack-plugin

在vue.config.js中配置add-asset-html-webpack-plugin

const webpack=require('webpack');const path=require('path');const AddAssetHtmlPlugin=require('add-asset-html-webpack-plugin');...
module.exports={...
   configureWebpack:(config)=>{if(process.env.NODE_ENV==='production'){// 为生产环境修改配置...
      config.mode='production';...
      Object.assign(config,{...
        plugins:[...newAddAssetHtmlPlugin(Object.keys(library).map(name=>{return{
              filepath: require.resolve(path.resolve(`libs/package/js/${name}.${version_lib}.dll.js`)),
              outputPath:'static/lib/js',
              publicPath:'./static/lib/js',
              includeSourcemap:false}})),]});...}else{// 为开发环境修改配置...
      config.mode='development';}...},...}

注：方案一、方案二可同时使用，单独使用方案二不需要将vue也添加进打包序列，那样会重复打包（在chunk-venders.js中始终会将vue打包进去），若同时使用则不会出现该情况。
至此，打包优化结束，运行打包，你会发现原先的vender文件没有了，同时多了好几个依赖的js文件（方案一）
build

三、打包时去除打印信息（console）

下载uglifyjs-webpack-plugin
uglifyjs-webpack-plugin中文文档
```
npm install --save-dev uglifyjs-webpack-plugin
```

在vue.config.js文件中引入，并在configureWebpack的optimization中添加如下代码

const UglifyPlugin=require('uglifyjs-webpack-plugin')
module.exports={...
 configureWebpack:(config)=>{if(process.env.NODE_ENV==='production'){// 为生产环境修改配置...
      config.mode='production'// 将每个依赖包打包成单独的js文件let optimization={...
        minimizer:[newUglifyPlugin({
          uglifyOptions:{
            compress:{
              warnings:false,
              drop_console:true,// console
              drop_debugger:false,
              pure_funcs:['console.log']// 移除console}}})]}
      Object.assign(config,{
        optimization})}else{// 为开发环境修改配置...
      config.mode='development'}...},...}

运行打包，你会发现我们在页面中写的那些打印日志的代码都消失了
注：以上代码适用于uglifyjs-webpack-plugin 2.1.1及以前的版本，新版uglifyjs-webpack-plugin需写成以下方式

...
minimizer:[newUglifyPlugin({
   uglifyOptions:{
       warnings:false,
       compress:{
         drop_console:true,// console
         drop_debugger:false,
         pure_funcs:['console.log']// 移除console}}})]...

四、配置全局jQuery

下载jQuery npm包
```
npm install --save-dev jquery
```

设置‘jquery$’别名,代码如下：

...
chainWebpack:(config)=>{// 修复HMR
    config.resolve.symlinks(true);// 别名配置
    console.log("__dirname",__dirname);
    config.resolve.alias.set('@', path.resolve(__dirname,'./src')).set('@a', path.resolve(__dirname,'./src/assets')).set('@c', path.resolve(__dirname,'./src/components')).set('@p', path.resolve(__dirname,'./src/pages')).set('jquery$','jquery/dist/jquery.min.js');},...

使用ProvidePlugin插件为jQuery添加全局变量

...
 configureWebpack:(config)=>{...
    Object.assign(config,{// 开发生产共同配置// externals: {//   'vue': 'Vue',//   'element-ui': 'ELEMENT',//   'vue-router': 'VueRouter',//   'vuex': 'Vuex'// } // 防止将某些 import 的包(package)打包到 bundle 中，而是在运行时(runtime)再去从外部获取这些扩展依赖(用于csdn引入)
      plugins:[...config.plugins,newwebpack.ProvidePlugin({
          jQuery:"jquery",
          $:"jquery","windows.jQuery":"jquery"})]});},...

至此可以在全局使用jquery了

五、开启gizp压缩

gizp压缩是一种http请求优化方式，通过减少文件体积来提高加载速度。html、js、css文件甚至json数据都可以用它压缩，可以减小60%以上的体积。webpack在打包时可以借助compression webpack plugin 实现gzip压缩。

下载 compression webpack plugin

npm install-D compression-webpack-plugin

在package.json中添加openGzip字段，用作gizp开启开关

{"name":"demo-cli3","version":"1.0.0","openGizp":false,...}

vue.config.js 中配置如下

const CompressionPlugin=require("compression-webpack-plugin");...
configureWebpack:(config)=>{if(process.env.NODE_ENV==='production'){// 为生产环境修改配置...
      config.mode='production';// 将每个依赖包打包成单独的js文件...if(openGzip){
        config.plugins=[...config.plugins,newCompressionPlugin({
            test:/\.js$|\.html$|.\css/,//匹配文件名
            threshold:10240,//对超过10k的数据压缩
            deleteOriginalAssets:false//不删除源文件})]}}else{// 为开发环境修改配置...
      config.mode='development';}...},...

注：生成的压缩文件以.gz为后缀，一般浏览器都已支持.gz的资源文件，在http请求的Request Headers 中能看到 Accept-Encoding:gzip。要使服务器返回.gz文件，还需要对服务器进行配置，根据Request Headers的Accept-Encoding标签进行鉴别，如果支持gzip就返回.gz文件。

六、将版本号添加进打包的js名中

vue.config.js 中配置如下

...let{ version, openGzip}=require('./package.json');
version= version.replace(/\./g,'_');...
module.exports={
  assetsDir:"static",
 configureWebpack:(config)=>{if(process.env.NODE_ENV==='production'){// 为生产环境修改配置...
      config.mode='production';...
      Object.assign(config,{
        output:{...config.output,
          filename:`static/js/[name].[chunkhash].${version}.js`,
          chunkFilename:`static/js/[name].[chunkhash].${version}.js`},...});...}else{// 为开发环境修改配置...
      config.mode='development';}...},}...

完整代码如下：

const webpack=require('webpack');const path=require('path');// const UglifyPlugin = require('uglifyjs-webpack-plugin');const CompressionPlugin=require("compression-webpack-plugin");const AddAssetHtmlPlugin=require('add-asset-html-webpack-plugin');let{ version, version_lib, openGzip,library}=require('./package.json');
version= version.replace(/\./g,'_'