国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

webpack3 升級 webpack4踩坑記錄

馬忠志 / 480人閱讀

摘要:本篇不包含所有坑,暫時只記錄自己踩到的部分坑一安裝安裝最新版本安裝新增依賴這個在中,本身和它的是在同一個包中,中將兩個分開管理。我記錄下自己更新這個的過程,以下前半部分可以直接跳過。以下記錄踩坑過程。

本篇不包含所有坑,暫時只記錄自己踩到的部分坑
一.安裝

安裝webpack4最新版本

npm install --save-dev webpack@4 

安裝新增依賴 webpack-cli

這個在webpack3中,webpack本身和它的CLI是在同一個包中,webpack4中將兩個分開管理。

npm install --save-dev webpack-cli
二.運行

執(zhí)行本地打包以及運行操作

npm run build:dll
npm run start

記得添加mode

用來告知 webpack 使用相應環(huán)境的內置優(yōu)化

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替代。

我記錄下自己更新這個的過程,以下前半部分可以直接跳過。

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

npm install --save-dev extract-text-webpack-plugin@4.0.0-beta.0

繼續(xù)報錯

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是用來查找相等或近似的模塊,避免在最終生成的文件中出現(xiàn)重復的模塊

已經(jīng)被廢除,刪除即可,見官網(wǎng)

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,重啟了終端,電腦也嘗試重啟一遍,依然報錯。

最后逐行注釋代碼,運行打包操作,發(fā)現(xiàn)是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, 主要更改點:

添加rule

添加需要處理的文件后綴,".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 {
  render() {
    return (
      

Hello, I am {this.props.name}, I in {this.props.company} now!

) } }

參考資料

1.https://blog.csdn.net/harsima...
2.https://www.typescriptlang.or...
3.https://webpack.docschina.org...
四.再推薦一個npm script命令優(yōu)化插件 better-npm-run

參考:

1.https://www.jianshu.com/p/710...
2.https://www.npmjs.com/package...

文章版權歸作者所有,未經(jīng)允許請勿轉載,若此文章存在違規(guī)行為,您可以聯(lián)系管理員刪除。

轉載請注明本文地址:http://specialneedsforspecialkids.com/yun/54261.html

相關文章

  • 如何優(yōu)雅的升級webpack4

    摘要:默認出入口在中,不再強制要求指定和路徑。構建模式提供了兩種構建模式可供選擇和選項描述會將的值設為。如果是,那就會開啟。默認只會對按需加載的代碼做分割。在或更低版本中,如果你想為一個推導出來的定制選項,你不得不在自己的選項中將它重復一遍。 前言 現(xiàn)在距離2018年2月15號webpack4.0.0出來已經(jīng)有一段時間了,現(xiàn)在已經(jīng)出了 @vue/cli 3.0,但是樓主還沒試過,聽說很強大,...

    zhangfaliang 評論0 收藏0
  • webpack4 系列教程: 前言

    摘要:課程地址全部課程地址立即進入課程源碼目錄截至按照知識點,目錄分成了個文件夾之后還會持續(xù)更新。個人網(wǎng)站原文鏈接系列教程前言 本文檔已經(jīng)過時,最近內容請看:https://godbmw.com/passage/76。一共16節(jié)課程和代碼。謝謝支持。 1. 什么是webpack? 前端目前最主流的javascript打包工具,在它的幫助下,開發(fā)者可以輕松地實現(xiàn)加密代碼、多平臺兼容。而最重要的...

    DevWiki 評論0 收藏0
  • webpack4 的開發(fā)環(huán)境配置說明

    摘要:的開發(fā)環(huán)境配置說明完整的的配置地址開發(fā)環(huán)境的搭建,總體而言就比較輕松,因為用戶就是開發(fā)者們。的做法是在的字段配置類似這樣這樣配置后,當運行時,在里通過可以取到值以來做判斷就可以啦。 webpack4 的開發(fā)環(huán)境配置說明 完整的webpack4的配置clone地址: https://github.com/ziwei3749/... 開發(fā)環(huán)境的搭建,總體而言就比較輕松,因為用戶就是開發(fā)者們...

    fancyLuo 評論0 收藏0
  • webpack4 的生產(chǎn)環(huán)境優(yōu)化

    摘要:的生產(chǎn)環(huán)境優(yōu)化完整配置的可以參考本文主要介紹了生產(chǎn)環(huán)境我都做了哪些優(yōu)化文章的結構如下靜態(tài)資源路徑。分配不同的關于穩(wěn)定性的坑注意區(qū)分整個項目有變動時,變化。而生產(chǎn)環(huán)境可以這一項,因為我們不需要在生產(chǎn)環(huán)境調試代碼。 webpack4 的生產(chǎn)環(huán)境優(yōu)化 webpack4完整配置的可以參考: https://github.com/ziwei3749/... 本文主要介紹了 webpack4 生產(chǎn)...

    bang590 評論0 收藏0
  • webpack4.x升級摘要

    摘要:以為例,編寫來幫助我們完成重復的工作編譯壓縮我只要執(zhí)行一下就可以檢測到文件的變化,然后為你執(zhí)行一系列的自動化操作,同樣的操作也發(fā)生在這些的預處理器上。的使用是針對第三方類庫使用各種模塊化寫法以及語法。 showImg(https://segmentfault.com/img/bVbtZYK); 一:前端工程化的發(fā)展 很久以前,互聯(lián)網(wǎng)行業(yè)有個職位叫做 軟件開發(fā)工程師 在那個時代,大家可能...

    levinit 評論0 收藏0

發(fā)表評論

0條評論

最新活動
閱讀需要支付1元查看
<