vue-cli#webpack3.0 升級到webpack4.6

絕對堅強發表於2018-04-27
VueWeb

全域性下載安裝webpack-cli

npm i webpack-cli -g

再當前專案中安裝下面包

npm i webpack-cli@2.0.15 webpack@4.6.0 css-loader@0.28.11 extract-text-webpack-plugin@4.0.0-beta.0 file-loader@1.1.11 html-webpack-plugin@3.2.0 optimize-css-assets-webpack-plugin@4.0.0 url-loader@1.0.1 vue-loader@15.0.3 vue-style-loader@4.1.3 vue-template-compiler@2.5.16 webpack-bundle-analyzer@2.11.1 webpack-dev-middleware@3.1.3 webpack-dev-server@3.1.3 webpack-hot-middleware@2.22.1 compression-webpack-plugin@1.1.11 -D

這個時候通過npm run dev可能會出現下面錯誤


如果出現上面的錯誤，則通過npm安裝下面包（主要是針對開通了eslint的情況需要更新eslint版本）

npm i eslint@4.19.1 eslint-config-standard@11.0.0 eslint-friendly-formatter@4.0.1 eslint-loader@2.0.0 eslint-plugin-import@2.11.0 eslint-plugin-node@6.0.1 eslint-plugin-promise@3.7.0 eslint-plugin-standard@3.1.0 eslint-plugin-vue@4.5.0 -D

再次執行可能會出現下面錯誤


如果出現上面的錯誤，則需要在webppack中配置(vue-loader 15版本需要)：

// webpack.config.js
const { VueLoaderPlugin } = require(`vue-loader`)
module.exports = {
  // ...
  plugins: [
    new VueLoaderPlugin()
  ]
}

下面開始就是關於webpack的一些配置了

需要對開發環境加上

mode: `development`

需要對生產環境加上

mode: `production`

將開發環境下面的兩個外掛去掉，因為webpack預設設定了

new webpack.NamedModulesPlugin()
new webpack.NoEmitOnErrorsPlugin()

將生產環境下面的commonschunkplugin外掛配置全部去掉

    new webpack.optimize.CommonsChunkPlugin({
      name: `vendor`,
      minChunks (module) {
        // any required modules inside node_modules are extracted to vendor
        return (
          module.resource &&
          /.js$/.test(module.resource) &&
          module.resource.indexOf(
            path.join(__dirname, `../node_modules`)
          ) === 0
        )
      }
    }),
    new webpack.optimize.CommonsChunkPlugin({
      name: `manifest`,
      minChunks: Infinity
    }),
    new webpack.optimize.CommonsChunkPlugin({
      name: `app`,
      async: `vendor-async`,
      children: true,
      minChunks: 3
    }),

然後加上下面的配置

optimization: {
    runtimeChunk: {
      name: `manifest`
    },
    splitChunks: {
      cacheGroups: {
        vendor: {
          test: /[\/]node_modules[\/]/,
          name: `vendor`,
          chunks: `all`
        },
        `async-vendors`: {
          test: /[\/]node_modules[\/]/,
          minChunks: 2,
          chunks: `async`,
          name: `async-vendors`
        }
      }
    }
  }

npm run build如果出現下面的錯誤


則需要將下面的配置

new ExtractTextPlugin({
  filename: utils.assetsPath(`css/[name].[contenthash].css`),
  allChunks: true
}),

改成

new ExtractTextPlugin({
  filename: utils.assetsPath(`css/[name].[md5:contenthash].css`),
  allChunks: true
}),

如果專案中原來使用了lodash,而且通過lodash-webpack-plugin進行按需載入的話，可能會出現下面的問題


如果出現了話，就將在webpack中下面配置的options整個去掉

{
    test: /.js$/,
    loader: `babel-loader`,
    options: {
      plugins: [`lodash`],
      presets: [[`env`, { modules: false, targets: { node: 4 } }]]
    },
    exclude: /node_modules/,
    include: [resolve(`src`), resolve(`test`)]
},

然後在.babelrc中的plugins中增加lodash

{
  "presets": [
    ["env", {
      "modules": false,
      "targets": {
        "browsers": ["> 1%", "last 2 versions", "not ie <= 8"]
      }
    }],
    "stage-2"
  ],
  "plugins": ["transform-vue-jsx", "transform-runtime", "lodash"],
  "env": {
    "test": {
      "presets": ["env", "stage-2"],
      "plugins": ["transform-vue-jsx", "istanbul"]
    }
  }
}

這樣就大功告成了。

相關文章