這篇文章給大家分享的是有關(guān)webpack4如何遷移的內(nèi)容。小編覺得挺實用的,因此分享給大家做個參考,一起跟隨小編過來看看吧。
在彝良等地區(qū),都構(gòu)建了全面的區(qū)域性戰(zhàn)略布局,加強發(fā)展的系統(tǒng)性、市場前瞻性、產(chǎn)品創(chuàng)新能力,以專注、極致的服務(wù)理念,為客戶提供網(wǎng)站建設(shè)、網(wǎng)站制作 網(wǎng)站設(shè)計制作按需定制網(wǎng)站,公司網(wǎng)站建設(shè),企業(yè)網(wǎng)站建設(shè),高端網(wǎng)站設(shè)計,網(wǎng)絡(luò)營銷推廣,成都外貿(mào)網(wǎng)站建設(shè),彝良網(wǎng)站建設(shè)費用合理。1.x到2.x
這次升級跨度比較大,我們是從webpack1.x升級到4.x,因為1.x與2.x相差挺大,所以第一件事,就是先升到2.x,比較大的改動就是loader的配置方式
// 1.x preLoaders: [ { test: /\.vue$/, loader: 'eslint', exclude: /node_modules/ }, { test: /\.js$/, loader: 'eslint', exclude: /node_modules/ } ], loaders: [ { test: /\.vue$/, loader: 'vue' }, { test: /\.json$/, loader: 'json' }, { test: /\.html$/, loader: 'html' }, ... ] //2.x module: { rules: [ { test: /.vue$/, use: 'eslint-loader', enforce: 'pre', // 對應(yīng)1.x的preLoaders exclude: /node_modules/ }, { test: /.js$/, use: 'eslint-loader', enforce: 'pre', exclude: /node_modules/ }, { test: /\.vue$/, use: 'vue-loader' }, { test: /\.json$/, use: 'json-loader' }, { test: /\.html$/, use: 'html-loader' }, ... ] },
而且loader
一定要寫完整,vue-loader
如果只寫vue
會報錯。loader
還可以通過options
進行配置。
{ loader: 'css-loader', options: { autoprefixer: false } }
舊版的鏈式調(diào)用也用數(shù)組替代。
1.x
style!postcss!less
2.x
use: [ "style-loader", "css-loader", "less-loader" ]
webpack2.x
默認支持es6的模塊,所以在編譯時候沒有必要將它們先轉(zhuǎn)換CommonJS
模塊再處理,babel-preset-es2015-webpack
已經(jīng)支持不轉(zhuǎn)換模塊中的import
和export
,只需要設(shè)置.babelrc
"presets": [ ["es2015", { "modules": false }] ]
另外就是插件的升級,運行時哪個插件報錯就升級哪個插件,屢試不爽。
2.x到4.x
第一步:版本升級
不再支持node 4,可以直接升級到8.x版本
webpack升級
npm install webpack@4 --save npm install webpack-cli --save // 不要忘記這一點,用來啟動webpack的
插件升級,同理,哪個報錯就升級哪個,除了html-webpack-plugin
用下面的方法升級,原因是作者還未來得及升級
npm i webpack-contrib/html-webpack-plugin --save-dev
extract-text-webpack-plugin
只有最新的beta版本才支持,所以npm install extract-text-webpack-plugin@next --save-dev
第二步 運行命令中添加 --mode development
和--mode production
PS:雖然說webpack 4
是零配置,入口默認是src/index.js
,出口是dist/
,但由于項目是多頁面的,所以這一步并沒有省略,根據(jù)實際情況來。
第三步 移除CommonsChunkPlugin
//替代方案 module: { rules: [ ... ] }, optimization: { splitChunks: { chunks: "all", // 必須三選一:'initial' | 'all' | 'async' minSize: 0, minChunks: 1, maxAsyncRequests: 1, maxInitialRequests: 1, name: () => {}, cacheGroups: { vendor: { chunks: 'all', test: /node_modules/, // 正則規(guī)則驗證,如果符合就提取chunks name: "vendor" // 要緩存的分割出來的chunk名稱 }, default: { chunks: 'all', name: 'commons', reuseExistingChunks: true } } } }
因為多個頁面,所以結(jié)合了html-webpack-plugin
new HtmlWebpackPlugin({ template: 'index.html', chunks: ['vendor', 'commons', 'index'] })
剛開始一直出錯,是因為我沒有復(fù)寫default
,也沒有default:false
,所以其實默認配置有將所有的模塊的公共部分分離到某個文件中,但我在HtmlWebpackPlugin
中的chunks
中又沒有添加,所以要么覆寫原來的默認配置,要么就關(guān)閉默認配置。
第四步:配置postcss autoprefixer
在根目錄下創(chuàng)建一個文件`postcss.config.js`
module.exports = { plugins: [ require('postcss-inline-svg')({ removeFill: false }), require('postcss-pxtorem')({ replace: process.env.NODE_ENV === 'production', rootValue: 750 / 16, minPixelValue: 1.1, propWhiteList: [], unitPrecision: 5 }), require('autoprefixer')({browsers: ['iOS>7', 'Android>4']}) ] }; ... { test: /\.(css|less)$/, use: ExtractTextPlugin.extract({ fallback: 'style-loader', use:[{ loader: 'css-loader', options: { autoprefixer: false } }, { loader: 'postcss-loader', options: { sourceMap: true } }, { loader: 'less-loader', options: { relativeUrls: true } }] }) }, ...
第五步:不需要UglifyJsPlugin插件
只需要設(shè)置optimization.minimize: true
就行,production mode
下面自動為true
以上只是在原有項目的基礎(chǔ)上對webpack 4
的升級,還有一些特性并沒有用到,所以沒有提及,比如sideEffects
、javascript/auto javascript/esm javascript/dynamic
、webassembly/experimental
等等,有機會再去探索。
感謝各位的閱讀!關(guān)于“webpack4如何遷移”這篇文章就分享到這里了,希望以上內(nèi)容可以對大家有一定的幫助,讓大家可以學到更多知識,如果覺得文章不錯,可以把它分享出去讓更多的人看到吧!
網(wǎng)頁題目:webpack4如何遷移-創(chuàng)新互聯(lián)
分享網(wǎng)址:http://www.muchs.cn/article32/dhossc.html
成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián),為您提供小程序開發(fā)、建站公司、定制網(wǎng)站、企業(yè)網(wǎng)站制作、外貿(mào)網(wǎng)站建設(shè)、網(wǎng)站改版
聲明:本網(wǎng)站發(fā)布的內(nèi)容(圖片、視頻和文字)以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主,如果涉及侵權(quán)請盡快告知,我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場,如需處理請聯(lián)系客服。電話:028-86922220;郵箱:631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載,或轉(zhuǎn)載時需注明來源: 創(chuàng)新互聯(lián)
猜你還喜歡下面的內(nèi)容