chinggo

近期有部分工具要測試，所以在家裡的電腦內要設定環境

很愉快地使用 NPM 並且 Init Vue Webpack simple-project

測試了一下發現，近期因為 Webpack 升級至 4 以上

在 Vue Cli 內的一些專案已經過於老舊，一拿到 npm run dev 就會直接報錯。便花了兩天處理並在這邊紀錄一下

1. 首先若你的 Node js 過於老舊，就更新吧!! 但請先使用移除再重新安裝的方式 (可能有些檔案有相依性，有部分問題我這樣解決的)

2. 安裝新版本的 NPM 並裝在 Global 環境 (這是官方建議)

3. 接著將 Init 得到的 Package 內的工具進行更新與安裝，以下我附上最終處理完畢的 Package.json 內容

  "scripts": {
    "dev": "cross-env NODE_ENV=development webpack-dev-server --mode development --port 8080 --open",
    "build": "cross-env NODE_ENV=production webpack --mode production --progress --hide-modules"
  },
  "dependencies": {
    "jquery": "^2.2.4",
    "style-loader": "^0.21.0",
    "vue": "^2.5.11"
  },
  "browserslist": [
    "> 1%",
    "last 2 versions",
    "not ie <= 8"
  ],
  "devDependencies": {
    "babel-core": "^6.26.0",
    "babel-loader": "^7.1.2",
    "babel-preset-env": "^1.6.0",
    "babel-preset-stage-3": "^6.24.1",
    "cross-env": "^5.1.4",
    "css-loader": "^0.28.7",
    "file-loader": "^1.1.4",
    "vue-loader": "^15.0.4",
    "vue-template-compiler": "^2.4.4",
    "webpack": "^4.6.0",
    "webpack-cli": "^2.0.15",
    "webpack-dev-server": "^3.1.3"
  }

4. 這下可好了，有很多工具升級 webpack.config.js 也要處理。所以，也直接附上我處理完的結果

const { VueLoaderPlugin } = require('vue-loader')
const UglifyJsPlugin = require('uglifyjs-webpack-plugin');
...

module: {
    rules: [
      {
        test: /\.css$/,
        use: [
          'vue-style-loader',
          'css-loader'
        ],
      },
    ....
    ]
},

plugins: [
    new VueLoaderPlugin()
],
optimization: {
    minimizer: [
      // we specify a custom UglifyJsPlugin here to get source maps in production
      new UglifyJsPlugin({
        cache: true,
        parallel: true,
        uglifyOptions: {
          compress: false,
          ecma: 6,
          mangle: true
        },
        sourceMap: true
      })
    ]
  }

再隨著 Package 與 Webpack 的升級。許多的工具要調整不少地方，在這裡將處理的結果分享出來