WebPack2配置随记

接触前端还不到一年，之前公司有一个UI的工程由我来独立完成，犹豫了几秒后决定选用react，花几天时间看完了阮一峰老师的React 技术栈系列教程就开始动手了，其中在webpack的配置上花了很多时间，因此整理了一下当成一个学习笔记吧

webpack2大部分的配置还是和webpack1一样，官方文档中有一篇从1迁移到2的指南

一、安装webpack相关组件以及热加载模块

npm install -D webpack webpack-dev-middleware webpack-dev-server webpack-hot-middleware babel-preset-react-hmre

在webpack1的时候是使用的react-hot-loader，后来无意间发现了这篇文章The Death of React Hot Loader(只看懂了标题)，果断弃用之，选用react-transform-hmr

二、配置实例

如下方的简单示例

const webpack = require('webpack');
module.exports = {
  entry: {
    app: 'entrance.js'
  },
  output: {
    path: 'fvrd/dist',
    filename: '[name].js',
  },
  module: {
    rules:[{
      test: /\.css$/,
      use:['style-loader', 'css-loader']
    }],
  },
  plugins: [
    new webpack.DefinePlugin({
      'process.env': {
        NODE_ENV: JSON.stringify('production')
      }
    })
  ],
};

1. entry是页面入口文件配置，Webpack 会分析入口文件，解析包含依赖关系的各个文件，当入口文件不止一个时，可以将其配置为数组，output 是输出项配置，如例子中的输出为app.js
2. module为加载器配置，例子中定义了.css文件的加载规则，会生成style标签放在head中。webpack1的时候use中的-loader后缀可以不写，webpack2必须要写
3. plugins为插件配置，例子中定义了一个环境变量，在代码中console.log(process.env.NODE_ENV)将打印production

三、重要的插件

• DefinePlugin
  注入环境变量，如在代码中需要开发和生产环境执行不一样的代码，可以使用此插件

new webpack.DefinePlugin({
  'process.env': {
     NODE_ENV: JSON.stringify('production')
   }
 })
 //代码中
 if(process.env.NODE_ENV==='production'){
    //do something
 }else{
    //do something
 }

• DllPlugin DllReferencePlugin
  解决打包速度慢的大招。第三方库是不经常变动的，在一个配置文件中使用DllPlugin把第三方库或者自己写的公共组件打包在一起并生成一个json文件，在另外一个配置文件中使用DllReferencePlugin就不会重复打包第三方库了。缺点是至少需要两个webpack配置文件

//一个配置文件
entry: {
    lib: ['react','react-dom','react-router','redux','...'],
}
new webpack.DllPlugin({
     path: path.join(__dirname, 'fvrd/dist/manifest.json'),
     name: '[name]',//在这个例子中将生成lib.js
     context: __dirname,
})
//另一个配置文件
new webpack.DllReferencePlugin({
  context: __dirname,
  manifest: require('./fvrd/dist/manifest.json'),
})

• ProvidePlugin
  用来定义全局变量

//以后使用jquery无需再require('jquery')
new webpack.ProvidePlugin({
 $: 'jquery',
  jQuery: 'jquery',
  'window.jQuery': 'jquery',
  'window.$': 'jquery',
})

• UglifyJsPlugin
  压缩代码

new webpack.optimize.UglifyJsPlugin({
  //压缩代码
  output: {
    comments: false, //不移除注释
  },
  compress: {
    warnings: false//忽略警告，某些没有用到的组件在打包时会被移除，这时会产生警告，无需在意，webpack1默认true，webpack2默认false
  },
})

• HtmlWebpackPlugin
  非默认组件，需要一个默认的index.html，js和css会自动插入此模板，不过通过DllPlugin生成的公共包需要自己手动引入

//npm install html-webpack-plugin --save-dev
let HtmlWebpackPlugin = require('html-webpack-plugin');
//...
new HtmlWebpackPlugin({
  favicon:'./src/images/icon_logo.png', //favicon路径
  filename: '../index.html', //生成的html存放路径，相对于 path
  template: './src/template/index.html', //html模板路径
  inject: true,
  hash: true,
  minify: {
  //压缩HTML文件
    removeComments:true,    //移除HTML中的注释
    collapseWhitespace:true    //删除空白符与换行符
  }
})

• ExtractTextPlugin
  主要用来将css文件分离开

//webpack2需要安装beta版
//npm install --save-dev extract-text-webpack-plugin@beta
let ExtractTextPlugin = require('extract-text-webpack-plugin