卸載相關(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新增 一個命令行的包)

• 會出現(xiàn)很多需要升級依賴的提示，和前面一樣先卸載然后安裝

• 下面是我的工程需要更新的東西
  ajv-keywords 這個錯誤暫時忽略無影響
  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 這個插件已經(jīng)被廢棄
  npm i mini-css-extract-plugin 官方建議使用這個代替

• eslint代碼檢
  npm uninstall eslint-config-standard -D
npm i eslint-config-standard@next -D

• stylus 升級
  npm uninstall stylus-loader -D
npm i stylus-loader -D

• vue-loader 升級
  npm uninstall vue-loader -D
npm i vue-loader -D
webpack 4.0 使用vue-loader 需要導(dǎo)入VueLoaderPlugin

• webpack.base.config.js 更新后

const path = require('path')
//4.0vue-loader需要這個
const VueLoaderPlugin = require('vue-loader/lib/plugin')

const createVueLoaderoptions = require('./vue-loader.config')
const isDev = process.env.NODE_ENV === 'development'

const config = {
  // webpack4.0 需要這個 webpack會自動配置
  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)編譯過的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'] 這個也不需要了
}
new webpack.optimize.CommonsChunkPlugin({
          name: 'vendor'
        }),
        // webpack 相關(guān)代碼打包到一個文件
        // 新模塊加入給新模塊加一個id
        // 規(guī)避長緩存問題
        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ū)分開發(fā)和發(fā)布
const isDev = process.env.NODE_ENV === 'development'

// 要加入服務(wù)端渲染
// 所以 不加入base
const defaultPlugins = [
  // 編譯過程中判斷 環(huán)境 開發(fā)環(huán)境 錯誤提示
  // 正式環(huán)境打包所需的內(nèi)容 提高程序的運行效率 而不是全部打包
  new webpack.DefinePlugin({
    'process.env': {
      NODE_ENV: isDev ? '"development"' : '"production"'
    }
  }),
  new HTMLPlugin() // 把html渲染到頁面上
]

const devServer = {
  port: 5900,
  host: '0.0.0.0', // 可以通過ip訪問
  overlay: {
    // 編譯過程出現(xiàn)錯誤 顯示出來
    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 啟動熱加載的插件
      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: { // 這里開始設(shè)置緩存的 chunks
          commons: {
            chunks: 'initial', // 必須三選一： "initial" | "all" | "async"(默認就是異步)
            minSize: 0, // 最小尺寸，默認0,
            minChunks: 2, // 最小 chunk ，默認1
            maxInitialRequests: 5 // 最大初始化請求書，默認1
          },
          vendor: {
            test: /node_modules/, // 正則規(guī)則驗證，如果符合就提取 chunk
            chunks: 'initial', // 必須三選一： "initial" | "all" | "async"(默認就是異步)
            name: 'vendor', // 要緩存的 分隔出來的 chunk 名稱
            priority: 10, // 緩存組優(yōu)先級
            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"
  }