webpack打包优化和打包上线

通过 npm run serve 启动本地 , 执行 development
通过 npm run test 打包测试 , 执行 testing
通过 npm run build 打包正式 , 执行 production

图片优化
使用 url-loader 优化， 将小图片转化成base64压缩,防止小图片太多请求次数太多。
下载 url-loader

  npm install -D url-loader

配置
在 webpack.prod.conf.js 文件夹中配置

   module: {
   
      rules: [{
   
         test: /\.(png|svg|jpg|gif)$/,
         use: [{
   
           loader: 'url-loader', // 优化小图片过多造成请求数太多
           options: {
   
             limit: 8192, // 如果图片小于 8192 bytes 就直接 base64 内置到模板，否则才拷贝
             outputPath: 'img/'
           } 
         }]
      },

分离第三方包
打包后的bundle.js文件夹较大，所以每次加载的时候，请求比较慢，所以有必要在打包时将第三方包分离出来。使用CommonsChunkPlugin 插件进行配置。
在 webpack.prod.conf.js 文件夹中配置

//引入webpack
     const webpack = require('webpack')

//将 entry  改成一个对象
       entry: {
   
         vendor: ['babel-polyfill', "axios", "marked", "react", "react-dom", "react-router-dom"], // 第三方文件
         app: './src/main.js'
       },
       plugins: [
         new webpack.optimize.CommonsChunkPlugin({
   
           name: "vendor", // 当加载 vendor 中的资源的时候，把这些资源都合并到 vendor.js 文件中
           filename: "js/vendor.js",
           minChunks: Infinity,
        })
      ],

分离 css 文件并压缩 css 文件
使用 extract-text-webpack-plugin 插件将css文件分离出来。为了使项目加载时候尽早优先加载css样式，也为了解决js文件体积过大的问题
下载 extract-text-webpack-plugin

  npm  install  -D  extract-text-webpack-plugin

配置
在 webpack.prod.conf.js 文件夹中配置

 //引入 
         const ExtractTextPlugin = require("extract-text-webpack-plugin")
    // 配置分离 css 文件
         plugins: [
               new ExtractTextPlugin("css/styles.css"), // 把抽离出来的 css 文件打包到 styles.css 文件中
         ],
        module: {
   
         rules: [ {
   
           test: /\.css$/,
           use: ExtractTextPlugin.extract({
   
                  fallback: "style-loader",
                  use: {
   
                        loader: 'css-loader',
                       options: {
   
                            minimize: true
                       }
                 }
          })
       },
     } ]
  // 配置压缩css (直接配置 css-loader 属性的选项)
 module: {
   
    rules: [
          {
   
            test: /\.css$/,
            use: ExtractTextPlugin.extract({
   
                fallback: "style-loader",
               //这个地方配置一个对象，添加一个属性进行压缩css文件
               use: {
   
                   loader: 'css-loader',
                  options