webpack3 升级 webpack4踩坑记录入门知识_webpack小白知识

一.安装安装webpack4最新版本npm install –save-dev webpack@4安装新增依赖 webpack-cli这个在webpack3中,webpack本身和它的CLI是在同一个包中,webpack4中将两个分开管理。npm install –save-dev webpack-cli二.运行执行本地打包以及运行操作npm run b

webpack3 升级 webpack4踩坑记录入门知识

一.安装

安装webpack4最新版本

webpack3 升级 webpack4踩坑记录入门知识_webpack小白知识

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'
};

其中遇到的报错:

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更多的配置请参考详细配置

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

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

更改webpack.base.config.js

去除

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

添加

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

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

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

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

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

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

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

继续报错

在之前版本中我们使用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
            }
          }
        ]

      },
    ],
  },

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

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

这个是内存溢出了,需要在启动命令中加一个空间 –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的报错。

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

以下记录踩坑过程。

因此导致我,删了好几次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>
    )
  }
}

参考资料

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

海计划公众号
(0)
上一篇 2020/03/26 23:35
下一篇 2020/03/26 23:35

您可能感兴趣的内容

  • tacit使用帮助_CSS Framework for Dummies, Without Classes

    tacit使用帮助 官方网址:http://yegor256.github.io/tacit/ GitHub:https://github.com/yegor256/tacit 简…

    2020/03/06
  • javascript如何循环遍历对象?入门基础知识_遍历菜鸟教程下载

    在JavaScript中有多种循环遍历对象的方法,下面本篇文章就来给大家介绍一下使用JavaScript循环遍历对象的方法,希望对大家有所帮助。1、使用for 循环for 循环是 Js 中最常用的一个循环工具,经常用于数组的循环遍历。let arr = [1,2,3];
    for (let i=0; i<arr.length; i++){console.log

    2020/03/22
  • web前端性能优化指南指南教程_性能基础知识

    前端需要性能优化么?性能优化一直以来都是前端工程领域中的一个重要部分。很多资料表明,网站应用的性能优化对于提高用户留存、转化率等都有积极影响。可以理解为,提升你的网站性能,就是提升你的业务数据(甚至是业务收入)。性能优化广义上包含前端优化和后端优化。后端优化的关注点更多的时候是在增加资源利用率、降低资源成本以及提高稳定性上。相较于后端,前端的性能优化会更直接

    2020/03/24
  • Paletton入门知识_在线配色设计工具

    Paletton小白常识 官方网址:http://paletton.com/ 简介描述:在线配色设计工具 In love with colors, since 2002. A de…

    2020/03/06
  • 软件架构五大原则基础知识_原则菜鸟教程

    方案架构师是负责系统架构以及特定产品的技术标准(包括技术、平台、基础架构)的专家。他们为产品设定前景,他们的分析也是产品的定义、设计、交付和永久支持的成功关键。因此,构架师不仅需要了解业务需求,还需要了解符合企业技术总目标的逻辑性、可扩展性及成本效益。架构师的重要技能之一就是能从许多不同的角度来看待架构,因为每一个单独的角度可能不完全相关,但结合在一起就可以

    2020/03/24
  • git中的 Merge 和 Rebase菜鸟攻略_git攻略教程

    概念Rebase 和 merge 都被设计用来将变更从一个分支整合到另一个分支,但是它们的实现方式却不同。下面假如我们有如下提交,merge 会将两个分支的代码合并,而 rebase 会将 feature 分支上所有的变更在 master 分支上重新应用一遍:当你将 feature 分支 rebase 到 master 时,实际上是将 feature 的 b

    2020/03/29
  • 原生js获取浏览器获X轴,Y轴的滚动距离使用攻略_滚动入门百科

    在前端开发中,需要获取浏览器滚动距离的需求,这篇文章主要讲解如何使用原生Js兼容实现获取浏览器获X轴,Y轴的滚动距离。并延伸扩展下我们一些不知道的js知识,希望对你有所帮助。代码实现://获取浏览器X轴,Y轴的滚动距离
    function getScrollDistance() {var obj=nullif (window.pageXOffset !==

    2020/04/03
  • Vue路由实现页面跳转的两种方式(router-link和JS)基础知识入门_路由菜鸟教程网

    Vue.js 路由可以通过不同的 URL 访问不同的内容,实现多视图的单页 Web 应用1、通过 实现 组件用于设置一个导航链接,切换不同 HTML 内容使用方法:简单写法demo2使用 v-bind 的写法<router-lin

    2020/03/26
  • 终于搞懂了回车与换行的区别基础入门_码零基础入门

    关于换行和回车其实平时我们不太在意,所以关于两者的区别也不太清楚,在平时开发时可能会遇到一些文件处理的问题,放到不同的操作系统上出现各种坑。那么回车和换行到底有哪些区别呢?今天咱们就来总结一下。1. 由来在计算机还没有出现之前,有一种叫做电传打字机(Teletype Model 33)的机械打字机,每秒钟可以打10个字符。但是它有一个问题,就是打完一行换行的

    2020/04/05
  • 原生JS实现动画函数的封装基础知识_封装小白指南

    封装了一个JS方法,支持元素的基本动画:宽、高、透明度…等,也支持链式动画和同时运动。 获取元素的属性的函数并进行了兼容性处理:function getStyle(obj, attr) {if(obj.currentStyle){ //IE浏览器return obj.currentStyle[attr];}else{ //chrome、fire

    2020/03/20
  • React 开发必须知道的 34 个技巧基础教程_技巧使用指南

    前言React 是前端三大框架之一,在面试和开发中也是一项技能;本文从实际开发中总结了 React 开发的一些技巧技巧,适合 React 初学或者有一定项目经验的同学;万字长文,建议收藏。 序列文章:Vue 开发必须知道的 36 个技巧【近1W字】1 组件通讯1.1 props子组件import React from “react”;
    import Prop

    2020/03/23
  • 一个新式的基于文本的浏览器 Browsh入门百科_浏览器作者: 翻译入门攻略

    什么是Browsh?Browsh是一个纯文本浏览器,可以运行在大多数的TTY终端环境和任何浏览器。目前,终端客户端比浏览器客户端更先进。TTY 客户端终端客户端即时更新和交付,以便于体验新的功能,例如,你可以观看视频。它使用UTF-8半块技巧(▀)从每个字符单元中获取2中颜色,从而仿真基本图形。对那些支持它的终端,除了键盘输入,它也可以理解鼠标输入。因此,你

    2020/04/05
  • 常见HTTP请求错误码入门百科_http零基础入门

    一些常见的状态码为:200 – 服务器成功返回网页404 – 请求的网页不存在503 – 服务不可用详细分解:1xx(临时响应)表示临时响应并需要请求者继续执行操作的状态代码。代码 说明100 (继续) 请求者应当继续提出请求。 服务器返回此代码表示已收到请求的第一部分,正在等待其余部分。 101 (切换协议) 请求者已要求服务器切换协议,服务器已确认

    2020/03/31
  • Bootstrap图标基础入门_图标小白攻略

    小图标icon是一个优秀Web中不可缺少的一部分,起到画龙点睛的效果。在Bootstrap框架中也为大家提供了250多个不同的icon图片。本文将详细介绍Bootstrap图标 原理分析Bootstrap框架中的图标都是字体图标,其实现原理就是通过@font-face属性加载了字体@font-face {
    font-family: ‘Glyphicons H

    2020/03/26
  • 从TypeScript中的类中派生接口菜鸟指南_接口小白常识

    大多数面向对象编程语言都鼓励编程到接口的模式。 TypeScript 当然支持这一点,你可以创建一个或多个接口,然后再定义生成这个接口实例的类(或工厂)。但是当程序员预期将来可能会存在多个具体实现时,有时会过度使用对接口的编程,尽管在实现时可能有一个。在直到真正实际需要这些多个实现之前,这些单实现接口会继续增加维护开销,因为每次我们需要引入新成员时,都需要修

    2020/03/26
  • 跟程序员聊天,实在是太难了!菜鸟教程网_段子小白攻略

    1那天我加班完跟项目组一起去吃烧烤宵夜,需要自己在纸上写要吃的东西,项目组的一个程序员负责写,点单期间有人说要吃大腰子,程序员GG就写上:1份大腰子但是本仙女对这种重口味的东西特别不能接受,看都不能看,我就说:不要点这么重口的东西可以吗?程序员GG非常体贴地说:好的,那不点了。没有人发现有什么不对劲……直到服务员上了111份大腰子!!!原来,程序员GG在大腰

    2020/03/23