vue升级webpack版本到webpack4

用vue来实验下, 目的是把webpack3升级至^4.0html

更新思路是vue

1. 先更新
2. 看是否废弃掉了

yarn global add @vue/cli-init 
vue init webpack hello_vue

cd hello_vue 
npm start

须要先验证工程是正确的, 能够运行后去看下webpack版本node

发现是3.6webpack

npm install webpack@latest -D
npm install webpack-dev-server@latest -D
npm i webpack-cli@latest -D
npm i html-webpack-plugin@latest -D
npm i eslint-loader@latest -D
npm i vue-loader@latest -D
npm i css-loader@latest -D
npm i postcss-loader@latest -D
npm start

根据npm start 报错来修改升级web

而后发现npm

再去写入配置文件async

配置和完成后就ok了webpack-dev-server

再去配置modepost

npm run build

打包看下有没有错

去官方文档把对应的代码加到配置和pro中去

optimization: {
    splitChunks: {
      chunks: 'async',
      minSize: 30000,
      maxSize: 0,
      minChunks: 1,
      maxAsyncRequests: 5,
      maxInitialRequests: 3,
      automaticNameDelimiter: '~',
      automaticNameMaxLength: 30,
      name: true,
      cacheGroups: {
        vendors: {
          test: /[\\/]node_modules[\\/]/,
          priority: -10
        },
        default: {
          minChunks: 2,
          priority: -20,
          reuseExistingChunk: true
        }
      }
    }
  }

注意有三个地方都要注释掉

而后发现报错:

Chunk.entrypoints: Use Chunks.groupsIterable and filter by instanceof Entrypoint instead

npm install extract-text-webpack-plugin@next -D

next表明还没正式发布的版本, 是在latest以后的

而后就是报错

Error: Path variable [contenthash] not implemented in this context: static/css/[name].[contenthash].css

这样就正式更新至webpack4完成