欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

詳解webpack4升級(jí)指南以及從webpack3.x遷移

 更新時(shí)間:2018年06月12日 10:01:14   作者:xhsdnn  
本篇文章主要介紹了詳解webpack4升級(jí)指南以及從webpack3.x遷移,小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧

幾天前webpack發(fā)布了新版本v4.0.0,其中做了很多改動(dòng),包括0配置以及移除了CommonsChunkPlugin等。由此而來(lái)的還有之前webpack3.x的項(xiàng)目如何遷移到新的webpack版本,本文就一個(gè)新的vue-cli創(chuàng)建的基于webpack的項(xiàng)目進(jìn)行遷移。

題外話:不要看0配置是很有噱頭,基本是不能滿足大部分用戶啊的需求,不過(guò)加入了更多的默認(rèn)配置確實(shí)也方便了用戶,配置相對(duì)簡(jiǎn)單,是一種開箱即用的方式。畢竟之前parcel的0配置確實(shí)搶了很多webpack的風(fēng)頭,然后也去弄了一下parcel使用parcel+vue的簡(jiǎn)單模版工程,有興趣可以看一下。

一、webpack4的新東西

0. 安裝

不在只安裝webpack即可,還需要安裝一個(gè)webpack-cli

全局安裝

sudo npm install -g webpack webpack-cli

局部安裝(當(dāng)前文件夾)

npm install --save-dev webpack webpack-cli

1. 0配置

默認(rèn)的入口為 './src/' 和默認(rèn)出口 './dist'

對(duì)壓縮(optimization.minimize)的設(shè)置,默認(rèn)在production時(shí)開啟,在development時(shí)關(guān)閉。

默認(rèn)配置不僅限于上述兩項(xiàng)。

2. mode/–mode參數(shù)

新增了mode/--mode參數(shù)來(lái)表示是開發(fā)還是生產(chǎn),mode有兩個(gè)可選值:development和production,production不支持監(jiān)聽,production側(cè)重于打包后的文件大小,development側(cè)重于構(gòu)建的速度。

webpack --mode development

也可以在配置文件中配置:

// webpack.config.js
module.exports = {
 mode: "production",
 // ...
}

3. 對(duì)uglifyjs升級(jí)

在之前的vue腳手架創(chuàng)建的基于webpack的工程,在webpack.prod.conf.js中可以清晰的看到配置中有這么一行:

// UglifyJs do not support ES6+, you can also use babel-minify for better treeshaking: https://github.com/babel/minify

在webpack4.0中已經(jīng)可以壓縮es6代碼,如:

class user {
 getUsername() {
  // to do
 }
}

壓縮之后為:

4. 移除loaders,必須使用rules

在webpack3.x中還保留之前版本的loaders,與rules并存都可以使用,在新版中完全移除了loaders,必須使用rules。

5. sideEffects

在模塊的package.js中添加sideEffects:false,當(dāng)使用export單獨(dú)導(dǎo)出的時(shí)候,不會(huì)打包export之外的其他文件,使打包的文件更小。

相關(guān)鏈接:https://github.com/webpack/webpack/tree/master/examples/side-effects

6. webpack4支持多種形式的模塊類型,但是有時(shí)候可能需要加上type進(jìn)行配合

如果是CommonJS, AMD, ESM三種類型的模塊,使用javascript/auto;

如果是EcmaScript modules(.mjs),使用javascript/esm,其他的模塊類型將不生效;

如果只有CommonJS和EcmaScript modules不可用,使用javascript/dynamic;

如果是json類型的文件,允許使用require和import來(lái)導(dǎo)入json,使用json;

如果是Webassembly,使用webassembly/experimental —— 官方說(shuō)是一個(gè)實(shí)驗(yàn)性的功能。

舉個(gè)栗子:

rules: [
 {
  test: /\.json$/,
  type: "javascript/auto"
 }
]

7. 支持ES6的方式導(dǎo)入JSON文件,并且可以過(guò)濾無(wú)用的代碼

下面是三種導(dǎo)入json文件的方法:

let jsonData = require('./data.json');

import jsonData from './data.json'

import { first } from './data.json'

其中使用import { first } from './data.json'引入的json文件會(huì)忽略沒導(dǎo)入的代碼,打包時(shí)只會(huì)將first的打進(jìn)去。

8. 移除CommonsChunkPlugin,用optimization.splitChunks和optimization.runtimeChunk來(lái)代替

這里內(nèi)容有點(diǎn)多,不做具體介紹,后續(xù)可能會(huì)出一篇有關(guān)optimization.splitChunks的文章,在下面從3.x遷移的時(shí)候會(huì)有簡(jiǎn)單介紹,出了上面的新版relesase鏈接外,下面還推薦幾個(gè)不錯(cuò)的鏈接:

RIP CommonsChunkPlugin
medium上的有關(guān)移除CommonsChunkPlugin的文章
medium上的有關(guān)webpack4更新文章

二、webpack 3.X 遷移到 webpack4.X

1. 更新webpack依賴

npm install -g webpack webpack-cli

npm install --save-dev webpack webpack-cli

2. 更新對(duì)應(yīng)模塊

在webpack升級(jí)的同時(shí),對(duì)應(yīng)的許多依賴也需要相應(yīng)的進(jìn)行升級(jí),下面是在vuec-cli的腳手架中需要的更新;對(duì)于其他工程,注意看控制臺(tái)的報(bào)錯(cuò),是哪個(gè)插件報(bào)的錯(cuò)就去升級(jí)那個(gè)插件,如果存在找不到模塊之類的錯(cuò)誤就去升級(jí)對(duì)應(yīng)的loader。

html-webpack-plugin => npm i -D html-webpacl-plugin

webpack-dev-server或者改為webpack-serve => npm i -D webpack-dev-server/npm i -D webpack-serve

vue-loader => npm i -D vue-loader

extract-text-webpack-plugin@next => npm i -D extract-text-webpack-plugin@next

3. 使用mode/–mode

在命令中加入--mode development/ --mode production或者在配置文件中加入mode: 'development'/mode: 'production'。

4. 如果使用CommonsChunkPlugin替換為optimization.splitChunks

使用栗子:

const webpack = require('webpack');

new webpack.optimize.SplitChunksPlugin({
 chunks: "all",
 minSize: 30000,
 minChunks: 1,
 maxAsyncRequests: 5,
 maxInitialRequests: 3,
 name: true,
 cacheGroups: {
  default: {
   minChunks: 2,
   priority: -20,
   reuseExistingChunk: true,
  },
  vendors: {
   test: /[\\/]node_modules[\\/]/,
   priority: -10
  }
 }
})

寫在后面

對(duì)于webpack的這次升級(jí)這里沒有一一列舉,選了幾個(gè)相對(duì)關(guān)鍵的點(diǎn),具體可以去看這里;有關(guān)從webpack3.x遷移到新版的時(shí)候可能還有其他的坑需要慢慢去趟,目前遇到的基本都解決了。

以上就是本文的全部?jī)?nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。

相關(guān)文章

最新評(píng)論