webpack——webpack-cli上线打包

安装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'
  },

4、关闭map文件，在config.js文件中

productionSourceMap: false,