写在前面
最近学习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.htmlinline: 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-pluginnew 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可以分析和优先考虑使用最多的模块，并为它们分配最小的IDnew webpack.optimize.OccurenceOrderPlugin(),new webpack.optimize.UglifyJsPlugin({compress: {//supresses warnings, usually from module minificationwarnings: 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'))})]
}
