卸載相關(guān)包然后重新安裝凶掰，再根據(jù)提示更新相關(guān)包
npm uninstall webpack webpack-dev-server webpack-merge -D
npm i webpack webpack-dev-server webpack-merge webpack-cli -D( webpack-cli 4.0新增 一個(gè)命令行的包)
會(huì)出現(xiàn)很多需要升級(jí)依賴的提示魂奥，和前面一樣先卸載然后安裝
下面是我的工程需要更新的東西
ajv-keywords這個(gè)錯(cuò)誤暫時(shí)忽略無(wú)影響
npm uninstall babel-loader extract-text-webpack-plugin file-loader html-webpack-plugin -D
npm i babel-loader file-loader html-webpack-plugin -D
extract-text-webpack-plugin 這個(gè)插件已經(jīng)被廢棄
npm i mini-css-extract-plugin官方建議使用這個(gè)代替eslint代碼檢
npm uninstall eslint-config-standard -D
npm i eslint-config-standard@next -Dstylus 升級(jí)
npm uninstall stylus-loader -D
npm i stylus-loader -Dvue-loader 升級(jí)
npm uninstall vue-loader -D
npm i vue-loader -D
webpack 4.0 使用vue-loader 需要導(dǎo)入VueLoaderPluginwebpack.base.config.js 更新后
const path = require('path')
//4.0vue-loader需要這個(gè)
const VueLoaderPlugin = require('vue-loader/lib/plugin')
const createVueLoaderoptions = require('./vue-loader.config')
const isDev = process.env.NODE_ENV === 'development'
const config = {
// webpack4.0 需要這個(gè) webpack會(huì)自動(dòng)配置
mode: process.env.NODE_ENV || 'production',
target: 'web',
entry: path.join(__dirname, '../client/index.js'),
output: {
filename: 'bundle.[hash:8].js',
path: path.join(__dirname, '../dist')
},
module: {
rules: [{
test: /\.(vue|js|jsx)$/,
loader: 'eslint-loader',
exclude: /node_modules/,
enforce: 'pre'
},
{
test: /\.vue$/,
loader: 'vue-loader',
options: createVueLoaderoptions(isDev)
},
{
test: /\.jsx$/,
loader: 'babel-loader'
},
{
test: /\.js$/,
loader: 'babel-loader',
exclude: /node_modules/
// 忽略已經(jīng)編譯過(guò)的js
},
{
test: /\.(gif|jpg|jpeg|png|svg)$/,
use: [{
loader: 'url-loader',
options: {
limit: 1024,
name: 'resources/[path][name].[hash:8].[ext]'
}
}]
}
]
},
plugins: [
new VueLoaderPlugin()
]
}
module.exports = config
不需要的配置刪除
devtool: '#cheap-module-eval-source-map'
entry:{
vendor: ['vue'] 這個(gè)也不需要了
}
new webpack.optimize.CommonsChunkPlugin({
name: 'vendor'
}),
// webpack 相關(guān)代碼打包到一個(gè)文件
// 新模塊加入給新模塊加一個(gè)id
// 規(guī)避長(zhǎng)緩存問(wèn)題
new webpack.optimize.CommonsChunkPlugin({
name: 'runtime'
})
new webpack.NoEmitOnErrorsPlugin()
更新后的webpack.config.client.js
const path = require('path')
const webpack = require('webpack')
const HTMLPlugin = require('html-webpack-plugin')
const merge = require('webpack-merge')
const MiniCssExtractPlugin = require('mini-css-extract-plugin')
// 導(dǎo)入公共配置
const baseConfig = require('./webpack.config.base')
// 2.1 環(huán)境變量的設(shè)置 區(qū)分開(kāi)發(fā)和發(fā)布
const isDev = process.env.NODE_ENV === 'development'
// 要加入服務(wù)端渲染
// 所以 不加入base
const defaultPlugins = [
// 編譯過(guò)程中判斷 環(huán)境 開(kāi)發(fā)環(huán)境 錯(cuò)誤提示
// 正式環(huán)境打包所需的內(nèi)容 提高程序的運(yùn)行效率 而不是全部打包
new webpack.DefinePlugin({
'process.env': {
NODE_ENV: isDev ? '"development"' : '"production"'
}
}),
new HTMLPlugin() // 把html渲染到頁(yè)面上
]
const devServer = {
port: 5900,
host: '0.0.0.0', // 可以通過(guò)ip訪問(wèn)
overlay: {
// 編譯過(guò)程出現(xiàn)錯(cuò)誤 顯示出來(lái)
errors: true
},
// historyFallback: {
// },
hot: true
}
let config
if (isDev) {
config = merge(baseConfig, {
module: {
rules: [{
test: /\.styl/,
use: [
'vue-style-loader',
'css-loader',
{
loader: 'postcss-loader',
options: {
sourceMap: true
}
},
'stylus-loader'
]
}]
},
devServer,
plugins: defaultPlugins.concat([
// 2.1 啟動(dòng)熱加載的插件
new webpack.HotModuleReplacementPlugin()
// ,
// new webpack.NoEmitOnErrorsPlugin()
])
})
} else {
config = merge(baseConfig, {
entry: {
app: path.join(__dirname, '../client/index.js')
},
output: {
filename: '[name].[chunkhash:8].js'
},
optimization: {
splitChunks: {
cacheGroups: { // 這里開(kāi)始設(shè)置緩存的 chunks
commons: {
chunks: 'initial', // 必須三選一： "initial" | "all" | "async"(默認(rèn)就是異步)
minSize: 0, // 最小尺寸焕刮，默認(rèn)0,
minChunks: 2, // 最小 chunk ，默認(rèn)1
maxInitialRequests: 5 // 最大初始化請(qǐng)求書围来，默認(rèn)1
},
vendor: {
test: /node_modules/, // 正則規(guī)則驗(yàn)證痛垛，如果符合就提取 chunk
chunks: 'initial', // 必須三選一： "initial" | "all" | "async"(默認(rèn)就是異步)
name: 'vendor', // 要緩存的 分隔出來(lái)的 chunk 名稱
priority: 10, // 緩存組優(yōu)先級(jí)
enforce: true
}
}
},
runtimeChunk: true
},
module: {
rules: [{
test: /\.styl/,
use: [
MiniCssExtractPlugin.loader,
'css-loader',
{
loader: 'postcss-loader',
options: {
sourceMap: true
}
},
'stylus-loader'
]
}]
},
plugins: defaultPlugins.concat(
[
// 指定輸出內(nèi)容的名字
new MiniCssExtractPlugin({
filename: '[name].[contentHash:8].css'
// chunkFilename: 'css/app.[contentHash:8].css'
})
]
)
})
}
module.exports = config
腳本命令配置
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"build:client": "cross-env NODE_ENV=production webpack --config build/webpack.config.client.js",
"dev": "cross-env NODE_ENV=development webpack-dev-server --config build/webpack.config.client.js",
"build": "npm run clean && npm run build:client",
"clean": "rimraf dist",
"lint": "eslint --ext .js --ext .jsx --ext .vue client/",
"lint-fix": "eslint --fix --ext .js --ext .jsx --ext .vue client/",
"precommit": "npm run lint-fix"
}
