脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript技巧 → webpack4升级

详解基于Vue cli生成的Vue项目的webpack4升级

 更新时间：2018年06月19日 10:37:39   作者：小火柴的蓝色理想  
这篇文章主要介绍了详解基于Vue cli生成的Vue项目的webpack4升级，本文将详细介绍从webpack3到webpack4的升级过程，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧

前面的话

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

概述

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

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

【0配置】

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

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

【模块类型】

webpack4提供了5种模块类型

  1. json: 可通过 require 和 import 导入的 JSON 格式的数据(默认为 .json 的文件)
  2. webassembly: WebAssembly 模块，（目前是 .wasm 文件的默认类型）
  3. javascript/auto: (webpack 3中的默认类型)支持所有的JS模块系统：CommonJS、AMD。
  4. javascript/esm: EcmaScript模块（默认 .mjs 文件）。
  5. 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这三个选择可选

【开发模式】

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

【生产模式】

  1. 启用所有优化代码的功能
  2. 更小的bundle大小
  3. 去除只在开发阶段运行的代码
  4. 关闭内存缓存
  5. Scope hoisting 和 Tree-shaking
  6. 开启 NoEmitOnErrorsPlugin
  7. 开启 ModuleConcatenationPlugin
  8. 开启 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

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

  1. signal: 创建一个被所有生成的块共享的runtime文件
  2. 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' }
+ },

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

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。

您可能感兴趣的文章:

相关文章

  • js-FCC算法-No repeats please字符串的全排列(详解)

    js-FCC算法-No repeats please字符串的全排列(详解)

    下面小编就为大家带来一篇js-FCC算法-No repeats please字符串的全排列(详解)。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2017-05-05
  • js实现将选中内容分享到新浪或腾讯微博

    js实现将选中内容分享到新浪或腾讯微博

    这篇文章主要介绍了js实现将选中内容分享到新浪或腾讯微博,需要的朋友可以参考下
    2015-12-12
  • 基于HTML+JS实现简单的年龄计算器

    基于HTML+JS实现简单的年龄计算器

    JavaScript提供了一些内置的日期和时间函数，有助于从日期（出生日期）开始计算年龄。本文主要介绍了使用这些JavaScript方法，制作一个简单的年龄计算器，快来跟随小编一起学习学习吧
    2021-12-12
  • layui select 禁止点击的实现方法

    layui select 禁止点击的实现方法

    今天小编就为大家分享一篇layui select 禁止点击的实现方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
    2019-09-09
  • webpack配置proxyTable时pathRewrite无效的解决方法

    webpack配置proxyTable时pathRewrite无效的解决方法

    这篇文章主要介绍了webpack配置proxyTable时pathRewrite无效的解决方法，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2018-12-12
  • 微信小程序保存图片到相册权限设置

    微信小程序保存图片到相册权限设置

    这篇文章主要为大家详细介绍了微信小程序保存图片到相册权限设置，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2020-04-04
  • 微信小程序 swiper 组件遇到的问题及解决方法

    微信小程序 swiper 组件遇到的问题及解决方法

    这篇文章主要介绍了微信小程序 swiper 组件遇到的问题及解决方法，本文通过实例代码给大家介绍的非常详细，具有一定的参考借鉴价值,需要的朋友可以参考下
    2019-05-05
  • 小程序中this.setData的使用和注意事项

    小程序中this.setData的使用和注意事项

    这篇文章主要介绍了微信小程序中this.setData的使用和注意事项,非常不错，具有一定的参考借鉴价值，需要的朋友可以参考下
    2019-08-08
  • BootStrap的两种模态框方式

    BootStrap的两种模态框方式

    bootstrap弹出层有多种触发方式，以下是我用到的bootstrap的两种模态框方式，需要的的朋友参考下吧
    2017-05-05
  • JS实现消灭星星案例

    JS实现消灭星星案例

    这篇文章主要为大家详细介绍了JS实现消灭星星案例，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2021-11-11

最新评论