生产环境配置 --webpack.production.config.js

同样的，先上完整代码：

var path = require('path')
var webpack = require('webpack');
var HtmlWebpackPlugin = require('html-webpack-plugin');
var ExtractTextPlugin = require('extract-text-webpack-plugin');
var autoprefixer = require('autoprefixer');
var OptimizeCssAssetsPlugin = require('optimize-css-assets-webpack-plugin');

module.exports = {
  entry: {
    app: path.resolve(__dirname,'./src/js/index.js'),// 将 第三方依赖 单独打包
    vendor: ['react','react-dom']
  },output: {
    path: __dirname + "/dist",// filename 属性表示的是如何命名出来的入口文件，规则是一下三种：
    // [name] 指代入口文件的name，也就是上面提到的entry参数的key，因此，我们可以在name里利用/，即可达到控制文件目录结构的效果。
    // [hash]，指代本次编译的一个hash版本，值得注意的是，只要是在同一次编译过程中生成的文件，这个[hash].js
    //的值就是一样的；在缓存的层面来说，相当于一次全量的替换。
    filename: "js/[name].[chunkhash:8].js",// publicPath 参数表示的是一个URL 路径（指向生成文件的跟目录），用于生成css/js/图片/字体文件
    // 等资源的路径以确保网页能正确地加载到这些资源.
    // “publicPath”项则被许多Webpack的插件用于在生产模式下更新内嵌到css、html文件里的url值.
    // 例如，在localhost（即本地开发模式）里的css文件中边你可能用“./test.png”这样的url来加载图片，
    // 但是在生产模式下“test.png”文件可能会定位到CDN上并且你的Node.js服务器可能是运行在HeroKu上边的。
    // 这就意味着在生产环境你必须手动更新所有文件里的url为CDN的路径。
    //开发环境：Server和图片都是在localhost（域名）下
    //.image {
    // background-image: url('./test.png');
    //}
    // 生产环境：Server部署下HeroKu但是图片在CDN上
    //.image {
    //  background-image: url('https://someCDN/test.png');
    //}
    publicPath: './'
  },module: {
    rules: [
      {
        test: /\.(js|jsx)$/,use: {
          loader: "babel-loader",options: {
            presets: ['env','react']
          }
        }
      },use: ExtractTextPlugin.extract({
          fallback: 'style-loader',use: ['css-loader','postcss-loader','less-loader']
        })
      },{
        test: /\.css$/,// exclude: /node_modules/,删掉次行  不然打包会报错  因为antd.css 在node_modules中
        use: ExtractTextPlugin.extract({
          fallback: 'style-loader','postcss-loader']
        })
      },options: {
            limit: '8192',outputPath: 'images/',publicPath : '/images'
          }
        }
      },outputPath: 'font/'
          }
        }
      }
    ]
  },plugins: [
    // webpack 内置的 banner-plugin
    new webpack.BannerPlugin("Copyright by 765745342@qq.com"),// html 模板插件
    new HtmlWebpackPlugin({
      template: __dirname + '/index.html'
    }),// 定义为生产环境，编译 React 时压缩到最小
    new webpack.DefinePlugin({
      'process.env': {
        'NODE_ENV': JSON.stringify(process.env.NODE_ENV)
      }
    }),// 为组件分配ID，通过这个插件webpack可以分析和优先考虑使用最多的模块，并为它们分配最小的ID
    new webpack.optimize.OccurrenceOrderPlugin(),new webpack.optimize.UglifyJsPlugin({
      compress: {
        //supresses warnings,usually from module minification
        warnings: false
      }
    }),// 分离CSS和JS文件
    new ExtractTextPlugin('css/[name].[chunkhash:8].css'),// 提供公共代码
    new webpack.optimize.CommonsChunkPlugin({name: 'vendor',filename: 'js/[name].[chunkhash:8].js'}),new OptimizeCssAssetsPlugin({
      assetNameRegExp: /\.css$/g,cssProcessor: require('cssnano'),cssProcessorOptions: { discardComments: {removeAll: true } },canPrint: true
    })
  ]
}

有些地方和 webpack.config.js 的配置是一样的我就不做说明了。

extract-text-webpack-plugin ： 开发环境下，css 代码是放在整个打包出来的那个 bundle.js 文件中的，发布环境下当然不能混淆在一起。该插件的主要是为了抽离css样式,防止将样式打包在js中引起页面样式加载错乱的现象。详细介绍https://www.npmjs.com/package...

webpack.optimize.CommonsChunkPlugin ： 将第三方依赖单独打包。即将 node_modules 文件夹中的代码打包为 vendor.js 将我们自己写的业务代码打包为 app.js。这样有助于缓存，因为在项目维护过程中，第三方依赖不经常变化，而业务代码会经常变化。详细介绍https://doc.webpack-china.org...

webpack.optimize.UglifyJsPlugin ： 压缩你的JS代码。详细介绍https://doc.webpack-china.org...

optimize-css-assets-webpack-plugin ： CSS代码压缩。详细介绍https://www.npmjs.com/package...

autoprefixer ： Autoprefixer是一个后处理程序，你可以同Sass，Stylus或LESS等预处理器共通使用。它适用于普通的CSS，而你无需关心要为哪些浏览器加前缀，只需全新关注于实现，并使用W3C最新的规范。详细介绍https://www.npmjs.com/package...
这是一个自动给你加上css浏览器前缀，比如
你只需写：

a {
    display: flex;
}

这个插件自动给你添加厂商前缀：

a {
    display: -webkit-Box;
    display: -webkit-flex;
    display: -ms-flexBox;
    display: flex;
}

这个插件请注意，你需要下载 postcss-loader
并且新建文件postcss.config.js
文件内容：

module.exports = {
  plugins: {
    'autoprefixer': {browsers: 'last 5 version'}
  }
}

这里需要额外安装的包：
postcss-loader@H_502_26@
extract-text-webpack-plugin@H_502_26@
optimize-css-assets-webpack-plugin@H_502_26@