webpack3 升级 webpack4踩坑记录

更新日期: 2019-07-24阅读: 3.9k标签: webpack

一.安装

安装webpack4最新版本

npm install --save-dev webpack@4

安装新增依赖 webpack-cli

这个在webpack3中,webpack本身和它的CLI是在同一个包中,webpack4中将两个分开管理。

npm install --save-dev webpack-cli


二.运行

执行本地打包以及运行操作

npm run build:dll
npm run start

记得添加mode

用来告知 webpack 使用相应环境的内置优化

module.exports = {
  mode: 'production' //或者 'development'
};

其中遇到的报错:

1.Error:webpack.optimize.UglifyJsPlugin has been removed,pleaseuseconfig.optimization.minimizeinstead.

UglifyJsPlugin是用来对js文件进行压缩

webpack4中UglifyJsPlugin被废除,需要安装新的插件uglifyjs-webpack-plugin进行替换,见官方文档

安装uglifyjs-webpack-plugin

npm install uglifyjs-webpack-plugin --save-dev

更改 webpack.dll.config.js || webpack.prod.config.js

去除

-  new webpack.optimize.UglifyJsPlugin({
-    compress: {
-      warnings: false
-    },
-    mangle: {
-      safari10: true,
-    },
-    output: {
-      comments: false,
-      ascii_only: true,
-    },
-    sourceMap: false,
-    comments: false
-  }),

添加

const UglifyJsPlugin = require('uglifyjs-webpack-plugin');
...
optimization: { //与entry同级
    minimizer: [
      new UglifyJsPlugin({
        uglifyOptions: {
          compress: false,
          mangle: true,
          output: {
            comments: false,
          },
        },
        sourceMap: false,
      })
    ]   
},
  

注意:uglifyjs-webpack-plugin更多的配置请参考详细配置

2.Error: webpack.optimize.CommonsChunkPlugin has been removed, please use config.optimization.splitChunks instead.

CommonsChunkPlugin 主要是用来提取第三方库和公共模块

CommonsChunkPlugin 已被移除,用splitChunks替代,见官方文档

更改webpack.base.config.js

去除

// new webpack.optimize.CommonsChunkPlugin({
//   children: true,
//   async: true,
//   minChunks: 2,
// }),

添加

optimization: {
    splitChunks: {
      chunks: 'async',
      minChunks: 2,
    },
  },

注意:splitChunks更多的配置请参考详细配置

3.compilation.mainTemplate.applyPluginsWaterfall is not a function

更新html-webpack-plugin到最新版本

npm install html-webpack-plugin@latest --save-dev
4.Chunk.entrypoints: Use Chunks.groupsIterable and filter by instanceof Entrypoint instead

这个最后解决方式是用mini-css-extract-plugin替代。

我记录下自己更新这个的过程,以下前半部分可以直接跳过。

  1. 更新extract-webpack-plugin到最新版本
npm install --save-dev extract-text-webpack-plugin@4.0.0-beta.0

继续报错

Path variable [contenthash] not implemented in this context: static/css/style.[contenthash].css

在之前版本中我们使用extract-text-webpack-plugin来提取CSS文件,不过在webpack 4.x中则应该使用mini-css-extract-plugin来提取CSS到单独文件中

更改如下

这是基于webpack 3.0

const utils = require('./utils')
const ExtractTextPlugin = require('extract-text-webpack-plugin')
module.exports = {
    //...
    new ExtractTextPlugin({
        filename: utils.assetsPath('css/[name].[contenthash:7].css')
    })
}

基于webpack 4.0

const utils = require('./utils')
const MiniCssExtractPlugin = require('mini-css-extract-plugin')
module.exports = {
    //...
    new MiniCssExtractPlugin({
        filename: utils.assetsPath('css/[name].[contenthash:7].css')
    })
}

css 以及 mini-css-extract-plugin 的 rule配置

module: {
    rules: [
      {
        test: /\.(css|less)$/,
        use: [
          {
            loader: MiniCssExtractPlugin.loader,
          },
          {
            loader: 'css-loader',
            options: {
              modules: true,
              importLoaders: 1,
              localIdentName: '[local]'
            }
          },
          {
            loader: 'postcss-loader',
            options: {
              ident: 'postcss',
              plugins: () => [
                require('postcss-flexbugs-fixes'),
                autoprefixer({
                  browsers: [
                    '>1%',
                    'last 4 versions',
                    'Firefox ESR',
                    'not ie < 9', // react doesn't support IE8 anyway
                  ],
                  flexbox: 'no-2009',
                }),
              ],
            }
          },
          {
            loader: 'less-loader',
            options: {
              modifyVars: theme
            }
          }
        ]

      },
    ],
  },
5.TypeError: webpack.optimize.DedupePlugin is not a constructor

DedupePlugin是用来查找相等或近似的模块,避免在最终生成的文件中出现重复的模块

已经被废除,删除即可,见官网

6.FATAL ERROR: Ineffective mark-compacts near heap limit Allocation failed - JavaScript heap out of...

这个是内存溢出了,需要在启动命令中加一个空间 --max_old_space_size=4096

"scripts": {
    "start": "better-npm-run start",
},
"betterScripts": {
    "start": {
      "command": "node --max_old_space_size=4096 build/server.js",
      "env": {
        "NODE_ENV": "development",
        "DEPLOY_ENV": "",
        "PUBLIC_URL": "",
        "PORT": "8082"
      }
    },
}

7.最后还有一个大坑

offline-plugin插件,配置service worker。这个插件的报错同以上UglifyJsPlugin的报错。

只需要更新到最新版本即可。

以下记录踩坑过程。

Error:webpack.optimize.UglifyJsPlugin has been removed,pleaseuseconfig.optimization.minimizeinstead.

因此导致我,删了好几次UglifyJsPlugin以及uglifyjs-webpack-plugin相关的所有代码,然后依然报错。

又以为是缓存问题,我重启了vscode,重启了终端,电脑也尝试重启一遍,依然报错。

最后逐行注释代码,运行打包操作,发现是offline-plugin插件的问题。

问题所在:offline-plugin5.0以前的版本会带有webpack.optimize.UglifyJsPlugin操作,最新的应该做了些处理。

详情参考

最后处理方式,更新offline-plugin到最新的版本

npm install offline-plugin --save-dev


三、新增TypeScript的打包

安装

npm install --save-dev typescript ts-loader

添加tsconfig.json文件

可以利用ts初始化命令自动添加

tsc --init

也可以手动新增文件。

其中配置详情如下,具体查阅tsconfig.json配置详情

{
  "compilerOptions": {
    "outDir": "./dist/",
    "noImplicitAny": true,
    "module": "commonjs",
    "target": "es5",
    "jsx": "react",
    "allowJs": true,
    "moduleResolution": "node",
    "esModuleInterop": true,
    "experimentalDecorators": true,
    "noUnusedParameters": true,
    "noUnusedLocals": true,
  },
  "module": "ESNext",
  "exclude": ["node_modules"]
}

配置 webpack 处理 TypeScript, 主要更改点:

  1. 添加rule
  2. 添加需要处理的文件后缀,'.ts'、'.tsx'等
rules: [
  {
    test: /\.tsx?$/,
    use: 'ts-loader',
    exclude: /node_modules/
  }
]
resolve: {
    extensions: [ '.tsx', '.ts', '.js' ]
},

测试文件TestTsLoader.tsx

用来检测是否配置成功,导入相应页面即可测试。实测ok

import * as React from "react"

interface TsProps {
  name: string
  company: string
}

export default class TestTsLoader extends React.Component<TsProps, {}> {
  render() {
    return (
      <h1>
        Hello, I am {this.props.name}, I in {this.props.company} now!
      </h1>
    )
  }
}

参考资料

1.https://blog.csdn.net/harsima...
2.https://www.typescriptlang.or...
3.https://webpack.docschina.org...


四.再推荐一个npm script命令优化插件 better-npm-run


链接: https://www.fly63.com/article/detial/4357

浅谈Webpack打包工具的应用

webpack 在前端工程中随处可见,当前流行的 vue, react, weex 等解决方案都推崇 webpack 作为打包工具。前端工具云集的时代,这是你值得选择的之一。

一步一步webpack,webpack的学习入门

webpack是前端工程构建的一套工具,为什么一个程序称之为一套呢,是因为webpack其实是npm的一个模块,使用起来的话,这期间还需要很多其它模块来进行支持,所以我称之为一套工具。

如何写 Webpack 配置文件

本文从一个小Demo开始,通过不断增加功能来说明webpack的基本配置,只针对新手。webpack基本的配置就可以熟悉了,会引入loader,配置loader选项,会设置alias,会用plugins差不多。

WebPack中Plugins的使用和整理,以及常用的Plugins插件

Plugins是webpack的基础,我们都知道webpage的plugin是基于事件机制工作的,这样最大的好处是易于扩展。讲解如果扩展内置插件和其他插件,以及我们常用的Plugins插件

大多数项目中会用到的webpack小技巧

webpack技巧的总结:进度汇报、压缩、复数文件打包、分离app文件与第三方库文件、资源映射、输出css文件、开发模式、分析包的大小、更小的react项目、更小的Lodash、引入文件夹中所有文件、清除extract-text-webpack-plugin日志。

优化Webpack构建性能的几点建议

Webpack 作为目前最流行的前端构建工具之一,在 vue/react 等 Framework 的生态圈中都占据重要地位。在开发现代 Web 应用的过程中,Webpack 和我们的开发过程和发布过程都息息相关,如何改善 Webpack 构建打包的性能也关系到我们开发和发布部署的效率。

Webpack 4正式发布了!

新版 Webpack 中我们所做的每一个更新目的都在于此,为了当大家在使用 Webpack 的时候敏捷连续毫无顿挫感。 webpack 4 进行构建性能测试,得出的结果非常有趣。结果很惊人,构建时间降低了 60%-98%!

Webpack 4.0.0不再支持 Node.js 4

Webpack 是一个现代 JavaScript 应用程序的模块打包器 (module bundler) 。当 Webpack 处理应用程序时,它会递归地构建一个依赖关系图,其中包含应用程序需要的每个模块

我当初为什么写webpack_Tobias Koppers

Tobias Koppers是一位自由软件开发者,家住德国纽伦堡。他因写出webpack这个已有数百万开发者使用的开源软件而名噪一时。他目前专注于JavaScript和开源项目。以下是我对他个人的专访,希望对大家有所启发。

webpack项目轻松混用css module

本文讲述css-loader开启css模块功能之后,如何与引用的npm包中样式文件不产生冲突。比如antd-mobilenpm包的引入。在不做特殊处理的前提下,样式文件将会被转译成css module。

点击更多...

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!