JAVA高级面试进阶训练营视频教程

admin

据说webpack4同比webpack旧版本构建速度提示至少一倍，于是开始webpack升级的尝试。

webpack4已经出来很长时间了，手头有一个基于webpack3的微信公众号项目，在项目的空档期自己在一个开发分支上做了webpack3向4的迁移。

　　首先将webpack升级到了4.28.2版本，因为线上项目基于webpack3的版本且为全局安装，不要求升级而且很稳定，项目也不是很重，所以在这个分支惊进行了局部安装（tip：看到有的童鞋说webpack的版本冲突的问题，就是升级了webpack之后，为什么在终端查看webpack版本的时候还是全局的，即为升级的版本。这个问题的解决方法是全局安装高版本的webpack，但是如何遇到像我这样的情况，不需要全局安装，那你就局部安装，虽然输出的是低版本，但是运行的是node_modules里面的webpack版本,效果如图：

 

）。安装的方法可以升级也可以安装具体的版本。

　　webpack4将webpack-cli进行了分离，所以需要单独安装。命令行代码：npm i -D webpack-cli

　　最基础的两个依赖安装完毕，如果你对webpack4更新之后的一些配置的更新很熟悉的话，可以直接进行配置。否则，你可以跑一下自己的项目，终端会报相应的错误，你可以针对性的进行版本迁移。npm run dev的项目可以直接在本地跑起来，当你想看本地build的项目的时候，需要将项目扔到服务器上，这就是为什么你运行了npm run build之后会出现这样的提示

我将我的项目利用nginx代理放到了服务器上，顺利的跑了起来。这样我们在进行升级到时候就可以同时升级开发和生产环境。

一、以下是我在升级到时候终端报错，及对应的解决办法：

Tapable.plugin is deprecated. Use new API on `.hooks` instead 

　　问题原因

　　extract-text-webpack-plugin目前版本不支持webpack4。

　　解决方案

　　使用extract-text-webpack-plugin的最新的beta版

　　npm install extract-text-webpack-plugin@next 

　　不在维护extract-text-webpack-plugin ，使用mini-css-extract-plugin来提取css 

Module build failed: TypeError: Cannot read property 'vue' of undefined

　　解决方案

　　Sorry, I forgot update vue-loader@latest

　　npm install vue-loader@14.2.2

箭头函数报错：

　　在.bablerc文件中presets的参数配置

　　{

　　  "presets": [

　　    "es2015",

　　    "stage-1"

 　　 ],

 　　 "env": {

  　　  "modules": false,　　

  　　  "targets": {

  　　    "browsers": ["> 1%", "last 2 versions", "not ie <= 8"]

  　　  },

  　　  "start": {

  　　    "presets": [

  　　      "react-hmre"

  　　    ]

  　　  }

 　　 },

  　　"plugins": ["transform-vue-jsx", "transform-runtime",

   　　["component", [

   　　   {

        　　"libraryName": "mint-ui",

        　　"style": true

      　　}

    　　]]]

　　}

Vue使用webpack：No parser and no file path given, couldn't infer a parser.

　　问题出在prettier。

　　解决方案

　　vue-loader@13.7.2 和vue-loader@14.2.3是已经修复了，等待发布新版可以解决

　　npm install prettier@1.12.1 --save-dev

TypeError: compilation.mainTemplate.applyPluginsWaterfall is not a function

　　解决方案

　　npm install --save-dev html-webpack-plugin@next

vue-loader was used without the corresponding plugin. Make sure to include VueLoaderPlugin in your webpack config.

　　解决方案

　　在webpack.config.js里面

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

　　plugin配置里面：new VueLoaderPlugin()

 

Module parse failed: Unexpected character '@' (286:2)

You may need an appropriate loader to handle this file type.

　　解决方案  *而且loader的顺序要保持为下方的顺序，loader的顺序为从右到左

　　{

  　　test: /\.css$/,

  　　use: ['style-loader','css-loader'],

　　} 

Unhandled rejection Error: "dependency" is not a valid chunk sort mode at HtmlWebpackPlugin.sortEntryChunks 

　  解决方案

  　chunksSortMode: 'none‘

 building for production...CssSyntaxError {

  name: 'CssSyntaxError',

  reason: 'Unknown word',

}

　　 解决方案

 　　vue-loader 必须有vueLoaderConfig

　　配置选项

　　use: [{

  　　loader: 'vue-loader',

  　　options: vueLoaderConfig

　　}],

二、以下是版本升级之后需要注意的地方：

 1.vue将style重复打包，将

{

  test: /\.scss$/,

  use: ["style-loader", "css-loader", "sass-loader"]

}

, {

  test: /\.css$/,

  use: ['style-loader', MiniCssExtractPlugin.loader, 'css-loader'],

}

, {

  test: /\.styl$/,

  use: [

    {

      loader: 'style-loader!css-loader',

      options: {

        minimize: true

      }

    },

    'postcss-loader', 'stylus-loader'

  ]

}

, {

  test: /\.ts$/, use: 'ts-loader'

}

这部分rules从webpack.base.conf.js放到webpack.prod.conf.js里面

2.移除CommonsChunkPlugin，用optimization.splitChunks和optimization.runtimeChunk来代替

3添加mode参数

4移除loaders使用rules

5处理css的loader里面要use  MiniCssExtractPlugin.loader并且MiniCssExtractPlugin.loader的顺序必须在css-loader之前在style-loader之后

 三、以下是做的一些优化之后遇到的问题及解决办法

******file-loader和url-loader的区别是file-loader生成相应的文件并在目录中显示，url-loader生成base64编码不在项目中显示——性能比较：file-loader生成的项目为534k，url-loader生成的项目为550k（临时数据）

 

*******static中的静态资源不参与到打包当中，适用于经常变更的资源，webpakc将static中的资源直接copy到打包项目中

 

*******要看本地build之后的项目，要将本地的项目扔到服务器上，可以配置一个nginx代理，代理到本地的build之后的代码路径，然后将本地的build的assetsPublicPath的值换做”./”防止找不到路径，之后就可以访问本地的打包之后的效果了

 

*******路由懒加载之后报错:emitting HtmlWebpackPlugin/Users/payplus/Desktop/workspace/webpack3-4-test/jcbs-web/src/main/webapp/jcbs-w/node_modules/toposort/index.js:35

      throw new Error('Cyclic dependency' + nodeRep)

更新html-webpack-plugin的版本npm i --save-dev html-webpack-plugin@next解决了问题

 

对于webpack4的“零配置”个人还是喜欢创建一个webpack.conf.js来进行一些配置的，webpack也是这么做的，允许开发者自主配置，零配置是为了方便开发者但是只提供相应的api而不懂其中的原理和流程是不利于开发者成长的，纯粹看官方文档和一些博客上面的迁移操作也许达不到自己的需求，毕竟当你不进行升级操作的时候，所有的案例都读得懂，但是当你升级了webpack之后终端一片夕阳红的时候，可能会觉得无从下手，希望本文能给你提供一些常见报错的解决思路或方法，如有其它的相关问题欢迎讨论。