webpack3升级webpack4

卸载相关包然后重新安装，再根据提示更新相关包

npm uninstall webpack webpack-dev-server webpack-merge -D
npm i webpack webpack-dev-server webpack-merge webpack-cli -D( webpack-cli 4.0新增一个命令行的包)

会出现很多需要升级依赖的提示，和前面一样先卸载然后安装
下面是我的工程需要更新的东西
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 这个插件已经被废弃
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 需要导入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/
        // 忽略已经编译过的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 相关代码打包到一个文件
        // 新模块加入给新模块加一个id
        // 规避长缓存问题
        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')
// 导入公共配置
const baseConfig = require('./webpack.config.base')

// 2.1 环境变量的设置 区分开发和发布
const isDev = process.env.NODE_ENV === 'development'

// 要加入服务端渲染
// 所以 不加入base
const defaultPlugins = [
  // 编译过程中判断 环境 开发环境 错误提示
  // 正式环境打包所需的内容 提高程序的运行效率 而不是全部打包
  new webpack.DefinePlugin({
    'process.env': {
      NODE_ENV: isDev ? '"development"' : '"production"'
    }
  }),
  new HTMLPlugin() // 把html渲染到页面上
]

const devServer = {
  port: 5900,
  host: '0.0.0.0', // 可以通过ip访问
  overlay: {
    // 编译过程出现错误 显示出来
    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: { // 这里开始设置缓存的 chunks
          commons: {
            chunks: 'initial', // 必须三选一： "initial" | "all" | "async"(默认就是异步)
            minSize: 0, // 最小尺寸，默认0,
            minChunks: 2, // 最小 chunk ，默认1
            maxInitialRequests: 5 // 最大初始化请求书，默认1
          },
          vendor: {
            test: /node_modules/, // 正则规则验证，如果符合就提取 chunk
            chunks: 'initial', // 必须三选一： "initial" | "all" | "async"(默认就是异步)
            name: 'vendor', // 要缓存的 分隔出来的 chunk 名称
            priority: 10, // 缓存组优先级
            enforce: true
          }
        }
      },
      runtimeChunk: true
    },
    module: {
      rules: [{
        test: /\.styl/,
        use: [
          MiniCssExtractPlugin.loader,
          'css-loader',
          {
            loader: 'postcss-loader',
            options: {
              sourceMap: true
            }
          },
          'stylus-loader'
        ]
      }]
    },
    plugins: defaultPlugins.concat(
      [
        // 指定输出内容的名字
        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"
  }

webpack3升级webpack4

卸载相关包然后重新安装，再根据提示更新相关包

不需要的配置删除

更新后的webpack.config.client.js

推荐阅读更多精彩内容