webpack 开发环境与生成环境的 配置

写在前面

最近学习react,之前做vue项目的时候，一直都是拿来主义，浑浑噩噩，感觉不太好，趁学习react的机会，在顺带学习一下webpack。一般配置文件分两份，为开发环境和生成环境。有此区分，是为了更好的利用缓存，生成环境将所有的第三分库文件打包成一个，所有的业务逻辑的文件就会单独生成一个，每次业务逻辑的修改之后，在生成环境中只需要上传修改代码逻辑的部分，而第三方库文件则不会修改，如此只需更新少量的代码，增加加载的速度。

webpack.config.js 开发开发环境的配置

package.json文件的内容

{
  "name": "react-dianping-webpack",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "start": "NODE_ENV=dev webpack-dev-server --progress --colors",
    "build": "rm -rf ./build && NODE_ENV=production webpack --config ./webpack.production.config.js --progress --colors"
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "autoprefixer": "^6.4.0",
    "babel-core": "^6.14.0",
    "babel-loader": "^6.2.5",
    "babel-plugin-react-transform": "^2.0.2",
    "babel-preset-es2015": "^6.14.0",
    "babel-preset-react": "^6.11.1",
    "css-loader": "^0.24.0",
    "eslint": "^3.4.0",
    "eslint-loader": "^1.5.0",
    "extract-text-webpack-plugin": "^1.0.1",
    "file-loader": "^0.9.0",
    "html-webpack-plugin": "^2.22.0",
    "json-loader": "^0.5.4",
    "koa": "^1.2.2",
    "koa-router": "^5.4.0",
    "less": "^2.7.1",
    "less-loader": "^2.2.3",
    "open-browser-webpack-plugin": "0.0.2",
    "postcss-loader": "^0.11.0",
    "react-transform-hmr": "^1.0.4",
    "style-loader": "^0.13.1",
    "url-loader": "^0.5.7",
    "webpack": "^1.13.2",
    "webpack-dev-server": "^1.15.0"
  },
  "dependencies": {
    "react": "^15.3.1",
    "react-dom": "^15.3.1"
  }
}

weboack.config.js文件的配置

var path =require('path')
var webpack = require('webpack') // 在package.json之中(dev)dependencies的名字，main
var HtmlWebpackPlugin = require('html-webpack-plugin') // 可以指定打包完成之后的js文件的挂载点
var OpenBrowserPlugin = require('open-browser-webpack-plugin') // 浏览器自动打开文件

module.exports = {
    entry:path.resolve(__dirname,'app/index.jsx'), // 打包入口文件
    output:{
        filename:"bundle.js"
    },
    resolve:{
        extensions:['','js','jsx'],// require 或者import的时候，不需要添加的文件后缀名
    },
    module:{
        loaders:[
            {test:/.(js|jsx)$/,exclude:/node_modules/,loader:'babel'},
            {test:/.less$/,exclude:/node_modules/,loader:'style!css!postcss!less'},// css-loader引入css文件，style-loader创建style标签，从右向左执行,顺序不可改变。
            {test:/.css$/,exclude:/node_modules/,loader:'style!css!postcss'},
            {test:/.(png|gif|jpg|jpeg|bmp)$/i,exclude:/node_modules/,loader:'url-loader?limit=5000'}, // Loads files as `base64` encoded URL
            {test:/.(png|woff|woff2|svg|ttf|eot)($|?)/i,exclude:/node_modules/,loader:'url-loader?limit=5000'}
        ]
    },

    postcss:[
        require('autoprefixer')  //调用autoprefixer插件，例如 display: flex
    ],
    
    plugins:[
        // html 模板插件
        new HtmlWebpackPlugin({
            template:__dirname+ '/app/index.tmpl.html'
        }),

        // 热加载插件,即不用刷新浏览器便可以展现修改
        new  webpack.HotModuleReplacementPlugin(),

        // 运行终端就可以打开文件
        new OpenBrowserPlugin({
            url: 'http://localhost:8080'
        }),

        // 定义生产环境还是开发环境,一般是配合package.json之中的script标签的使用
        new webpack.DefinePlugin({
            __DEV__:JSON.stringify(JSON.parse((ProgressEvent.evn.NODE_DEV == "dev") || false))
        })
    ],

    devServer: {
        colors: true, //终端中输出结果为彩色
        historyApiFallback: true, //不跳转，在开发单页应用时非常有用，它依赖于HTML5 history API，如果设置为true，所有的跳转将指向index.html
        inline: true, //实时刷新
        hot: true  // 使用热加载插件 HotModuleReplacementPlugin
    }

}

生产环境中的webpack.production.config.js的配置

var pkg = require('./package.json')
var path = require('path')
var webpack = require('webpack');
var HtmlWebpackPlugin = require('html-webpack-plugin');
var ExtractTextPlugin = require('extract-text-webpack-plugin');

module.exports = {
  entry: {
    app: path.resolve(__dirname, 'app/index.jsx'),
    // 将 第三方依赖（node_modules中的） 单独打包
    vendor: Object.keys(pkg.dependencies)
  },
  output: {
    path: __dirname + "/build",
    filename: "/js/[name].[chunkhash:8].js"
  },

  resolve:{
      extensions:['', '.js','.jsx']
  },

  module: {
    loaders: [
        { test: /.(js|jsx)$/, exclude: /node_modules/, loader: 'babel' },
        { test: /.less$/, exclude: /node_modules/, loader: ExtractTextPlugin.extract('style', 'css!postcss!less') },
        { test: /.css$/, exclude: /node_modules/, loader: ExtractTextPlugin.extract('style', 'css!postcss') },
        { test:/.(png|gif|jpg|jpeg|bmp)$/i, loader:'url-loader?limit=5000&name=img/[name].[chunkhash:8].[ext]' },
        { test:/.(png|woff|woff2|svg|ttf|eot)($|?)/i, loader:'url-loader?limit=5000&name=fonts/[name].[chunkhash:8].[ext]'}
    ]
  },
  postcss: [
    require('autoprefixer')
  ],

  plugins: [
    // webpack 内置的 banner-plugin
    new webpack.BannerPlugin("Copyright by wangfupeng1988@github.com."),

    // html 模板插件
    new HtmlWebpackPlugin({
        template: __dirname + '/app/index.tmpl.html'
    }),

    // 定义为生产环境，编译 React 时压缩到最小
    new webpack.DefinePlugin({
      'process.env':{
        'NODE_ENV': JSON.stringify(process.env.NODE_ENV)
      }
    }),

    // 为组件分配ID，通过这个插件webpack可以分析和优先考虑使用最多的模块，并为它们分配最小的ID
    new webpack.optimize.OccurenceOrderPlugin(),
    
    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'
    }),

    // 可在业务 js 代码中使用 __DEV__ 判断是否是dev模式（dev模式下可以提示错误、测试报告等, production模式不提示）
    new webpack.DefinePlugin({
      __DEV__: JSON.stringify(JSON.parse((process.env.NODE_ENV == 'dev') || 'false'))
    })
  ]
}