写在前面

最近学习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'))

    })

  ]

}