代码改变世界
[登录 · 注册]
  • 基于Vue cli生成的Vue项目的webpack4升级
  • 前面的话

      本文将详细介绍从webpack3到webpack4的升级过程

    概述

      相比于webpack3,webpack4可以零配置运行,打包速度比之前提高了90%,可以直接到ES6的代码进行无用代码剔除,新增的optimization使用简单

      在未来,CSS、HTMl和文件都会成为原生模块

    【0配置】

      webpack4 设置了默认值,以便无配置启动项目

    entry 默认值是 ./src/
    output.path 默认值是 ./dist
    mode 默认值是 production

    【模块类型】

      webpack4提供了5种模块类型

    json: 可通过 require 和 import 导入的 JSON 格式的数据(默认为 .json 的文件)
    webassembly: WebAssembly 模块,(目前是 .wasm 文件的默认类型)
    javascript/auto: (webpack 3中的默认类型)支持所有的JS模块系统:CommonJS、AMD。
    javascript/esm: EcmaScript模块(默认 .mjs 文件)。
    javascript/dynamic: 仅支持 CommonJS & AMD。
      webpack 4 不仅支持本地处理 JSON,还支持对 JSON 的 Tree Shaking。当使用 ESM 语法 import json 时,webpack 会消除掉JSON Module 中未使用的导出。此外,如果要用 loader 转换 json 为 js,需要设置 type 为 javascript/auto
     

    模式mode

      相比于webpack3,webpack4新增了一个mode配置选择,用来表示配置模式的选择情况

    module.exports = {
      mode: 'production'
    }

      包括生产环境production、开发环境devolopment和自定义none这三个选择可选

    【开发模式】

    浏览器调试工具
    注释、开发阶段的详细错误日志和提示
    快速和优化的增量构建机制
    开启 output.pathinfo 在 bundle 中显示模块信息
    开启 NamedModulesPlugin
    开启 NoEmitOnErrorsPlugin

    【生产模式】

    启用所有优化代码的功能
    更小的bundle大小
    去除只在开发阶段运行的代码
    关闭内存缓存
    Scope hoisting 和 Tree-shaking
    开启 NoEmitOnErrorsPlugin
    开启 ModuleConcatenationPlugin
    开启 optimization.minimize

    【none】

      禁用所有的默认设置

    optimization

      从webpack4开始官方移除了commonchunk插件,改用了optimization属性进行更加灵活的配置,下面来介绍optimization下的一些常用配置项

    【minimize】

      利用unglifyjsWebpackPlugin插件来压缩模块,生产环境下该值默认为true

      optimization: {
        minimize: false
      }

    【minimier】

      可以使用其他插件来执行压缩功能

    const UglifyJsPlugin = require('uglifyjs-webpack-plugin');
    
    module.exports = {
      //...
      optimization: {
        minimizer: [
          new UglifyJsPlugin({ /* your config */ })
        ]
      }
    };

    【splitChunks】

      webpack4默认使用splitChunksPlugin插件来实现代码分割功能,来替代webpack3中的commonChunksPlugin插件

    module.exports = {
      //...
      optimization: {
        splitChunks: {
          chunks: 'async',
          minSize: 30000,
          minChunks: 1,
          maxAsyncRequests: 5,
          maxInitialRequests: 3,
          automaticNameDelimiter: '~',
          name: true,
          cacheGroups: {
            vendors: {
              test: /[\/]node_modules[\/]/,
              priority: -10
            },
            default: {
              minChunks: 2,
              priority: -20,
              reuseExistingChunk: true
            }
          }
        }
      }

    【runtimeChunk】

      通过设置 runtimeChunk: true 来为每一个入口默认添加一个只包含 runtime 的 chunk

      通过提供字符串值,可以使用插件的预设模式

    signal: 创建一个被所有生成的块共享的runtime文件
    multiple: 为共同的块创建多个runtime文件

      缺省值为false,表示每个入口块默认内嵌runtime代码

        runtimeChunk {
          name: "runtime"
        }

    【noEmitOnErrors】

      只要在编译时出现错误,就使用noEmitOnErrors属性来跳过emit 阶段,用来替代NoEmitOnErrorsPlugin 插件

    【nameModules】

      使用可读的模块标识,方便更好的调试。webpack在开发模式下默认开启,生产模式下默认关闭,用来替代 NamedModulesPlugin 插件

    module.exports = {
      //...
      optimization: {
        namedModules: true
      }
    };

    升级

      下面就基于vue-cli的项目对webpack配置进行升级

      1、升级nodejs

      使用 webpack4 时,必须保证 Node.js 版本 >= 8.9.4,因为 webpack4 使用了大量的ES6语法,这些语法在 nodejs新版 v8 中得到了原生支持

      2、升级webpack主要部件,包括webpack、webpack-bundle-analyzer、webpack-dev-server、webpack-merge

      升级的操作很简单,先删除,再安装即可。但要注意的是webpack4版本中 cli 工具分离成了 webpack 核心库 与 webpack-cli 命令行工具两个模块,需要使用 CLI,必安装 webpack-cli 至项目中

    cnpm uninstall -D webpack webpack-bundle-analyzer webpack-dev-server webpack-merge
    cnpm install -D webpack webpack-cli webpack-bundle-analyzer webpack-dev-server webpack-merge

      3、升级webpack相关插件,包括copy-webpack-plugin、css-loader、eslint-loader、file-loader、html-webpack-plugin、url-loader、friendly-errors-webpack-plugin、optimize-css-assets-webpack-plugin、uglifyjs-webpack-plugin

    cnpm uninstall -D copy-webpack-plugin css-loader eslint-loader file-loader html-webpack-plugin url-loader  friendly-errors-webpack-plugin optimize-css-assets-webpack-plugin uglifyjs-webpack-plugin
    cnpm install -D copy-webpack-plugin css-loader eslint-loader file-loader html-webpack-plugin url-loader  friendly-errors-webpack-plugin optimize-css-assets-webpack-plugin uglifyjs-webpack-plugin

      4、升级vue-loader

      由于vue-loader升级到版本15后,配置有较多的变化,稳妥起见,可以只将vue-loader升级到14.4.2

    cnpm uninstall -D vue-loader
    cnpm uninstall -D vue-loader@14.4.2

      5、替换webpack相关插件,extract-text-webpack-plugin替换为mini-css-extract-plugin

    cnpm uninstall -D extract-text-webpack-plugin
    cnpm install -D mini-css-extract-plugin

    配置

      下面对配置文件的修改进行详细说明:

      1、webpack.base.conf.js文件

      增加node:process.env.NODE_ENV即可

    module.exports = {
    +  mode: process.env.NODE_ENV,
    ...

      2、webpack.prop.conf.js文件

      该文件的配置项较为复杂

      (1)将ExtractTextPlugin替换为MiniCssExtraPlugin

    + const MiniCssExtractPlugin = require("mini-css-extract-plugin")
    - const ExtractTextPlugin = require('extract-text-webpack-plugin')
    
    ...
    -    new ExtractTextPlugin({
    +    new MiniCssExtractPlugin({
          filename: utils.assetsPath('css/[name].[contenthash].css'),
          allChunks: true,
        }),
    ...

      (2)删除UglifyJsPlugin配置项

    - const UglifyJsPlugin = require('uglifyjs-webpack-plugin')
    ...
    - new UglifyJsPlugin({
    -      uglifyOptions: {
    -        compress: {
    -          warnings: false
    -        }
    -      },
    -      sourceMap: config.build.productionSourceMap,
    -      parallel: true
    - })

      (3)删除CommonsChunkPlugin配置项

    - new webpack.optimize.CommonsChunkPlugin({
    -      name: 'vendor',
    -      minChunks (module) {
    -        return (
    -          module.resource &&
    -          /.js$/.test(module.resource) &&
    -          module.resource.indexOf(
    -            path.join(__dirname, '../node_modules')
    -          ) === 0
    -        )
    -      }
    -    }),
    -    new webpack.optimize.CommonsChunkPlugin({
    -     name: 'manifest',
    -      minChunks: Infinity
    -    }),
    -    new webpack.optimize.CommonsChunkPlugin({
    -      name: 'app',
    -      async: 'vendor-async',
    -      children: true,
    -      minChunks: 3
    -    }), 
    ...

      (4)添加optimization配置项

    +  optimization: {
    +    splitChunks: {
    +      chunks: 'async',
    +      minSize: 30000,
    +      minChunks: 1,
    +      maxAsyncRequests: 5,
    +      maxInitialRequests: 3,
    +      automaticNameDelimiter: '~',
    +      name: true,
    +      cacheGroups: {
    +        vendors: {
    +          test: /[\/]node_modules[\/]/,
    +          priority: -10
    +        },
    +        default: {
    +          minChunks: 2,
    +          priority: -20,
    +          reuseExistingChunk: true
    +        }
    +      }
    +    },
    +    runtimeChunk: { name: 'runtime' }
    +  },

      详细配置移步前端小站源码

  • 【推广】 阿里云小站-上云优惠聚集地(新老客户同享)更有每天限时秒杀!
    【推广】 云服务器低至0.95折 1核2G ECS云服务器8.1元/月
    【推广】 阿里云老用户升级四重礼遇享6.5折限时折扣!
  • 原文:https://www.cnblogs.com/xiaohuochai/p/9196906.html
走看看 - 开发者的网上家园