安裝webpack以及webpack-cli

1、使用以下命令

npm run build

webpack會自動生成dist專案資料夾，資料夾中的css、js等檔案均已使用loader壓縮

2、如果需要分析各打包完成的檔案大小，可以在build資料夾中的webpack.prod.conf.js（生產配置檔案）中新增外掛 webpack-bundle-analyzer ，使用 npm run build 生成打包資料夾的時候，會計算檔案的大小，並開啟一個html頁面顯示結果

const {BundleAnalyzerPlugin}=require('webpack-bundle-analyzer')//匯入外掛

const webpackConfig = merge(baseWebpackConfig, {

    plugins: [
...
      //https://www.npmjs.com/package/webpack-bundle-analyzer
      new BundleAnalyzerPlugin(),  //新增例項
...
  ]
}

 

3、上線專案不使用本地依賴JS檔案，使用CDN代替本地JS檔案，新增externals屬性，用來忽略模組

  //用於忽略模組打包，開發使用本地JS檔案，專案上線使用CDN
  externals:{
    'iview':'iview',
    'vue':'Vue',
    'vue-router':'vueRouter',
    'vuex':'vuex'
  },