webpack作爲前端構建工具已被廣泛使用,最近在做react+reflux+webpack的項目,於是在這裏保存一下webpack的配置,供以後查閱。
webpack在開發模式下的配置:
/*
* Webpack development server configuration
*
* This file is set up for serving the webpack-dev-server, which will watch for changes and recompile as required if
* the subfolder /webpack-dev-server/ is visited. Visiting the root will not automatically reload.
*/
'use strict';
var webpack = require('webpack');
module.exports = {
output: {
filename: 'main_newba4.0.js',
publicPath: '/assets/'
},
cache: true,
debug: true,
devtool: false,
entry: [
'webpack/hot/only-dev-server',
'./src/scripts/components/main.js'
],
stats: {
colors: true,
reasons: true
},
resolve: {
extensions: ['', '.js'],
alias: {
'styles': __dirname + '/src/styles',
'mixins': __dirname + '/src/scripts/mixins',
'components': __dirname + '/src/scripts/components/',
'stores': __dirname + '/src/scripts/stores/',
'actions': __dirname + '/src/scripts/actions/',
'config': __dirname + '/src/config/',
'utils': __dirname + '/src/scripts/utils'
}
},
module: {
preLoaders: [{
test: /\.js$/,
exclude: /node_modules/,
loader: 'jsxhint'
}],
loaders: [{
test: /\.js$/,
exclude: /node_modules/,
loader: 'react-hot!babel-loader'
}, {
test: /\.css$/,
loader: 'style-loader!css-loader'
}, {
test: /\.(png|jpg)$/,
loader: 'url-loader?limit=8192'
}]
},
plugins: [
new webpack.HotModuleReplacementPlugin(),
new webpack.NoErrorsPlugin()
]
};
/*
* Webpack distribution configuration
*
* This file is set up for serving the distribution version. It will be compiled to dist/ by default
*/
'use strict';
var webpack = require('webpack');
module.exports = {
output: {
publicPath: '/assets/',
path: 'dist/assets/',
filename: 'main_newba4.0.js'
},
debug: false,
devtool: false,
entry: {
app: './src/scripts/components/main.js',
vendor: ['classnames', 'lodash', 'moment', 'normalize.css',
'react', 'react-router', 'reflux', 'uuid']
},
stats: {
colors: true,
reasons: false
},
plugins: [
new webpack.optimize.DedupePlugin(),
new webpack.optimize.UglifyJsPlugin(),
new webpack.optimize.OccurenceOrderPlugin(),
new webpack.optimize.AggressiveMergingPlugin(),
new webpack.optimize.CommonsChunkPlugin('vendor', 'vendor.bundle_newba4.0.js')
],
resolve: {
extensions: ['', '.js'],
alias: {
'styles': __dirname + '/src/styles',
'mixins': __dirname + '/src/scripts/mixins',
'components': __dirname + '/src/scripts/components/',
'stores': __dirname + '/src/scripts/stores/',
'actions': __dirname + '/src/scripts/actions/',
'config': __dirname + '/src/config/',
'utils': __dirname + '/src/scripts/utils'
}
},
module: {
preLoaders: [{
test: /\.js$/,
exclude: /node_modules/,
loader: 'jsxhint'
}],
loaders: [{
test: /\.js$/,
exclude: /node_modules/,
loader: 'babel-loader'
}, {
test: /\.css$/,
loader: 'style-loader!css-loader'
}, {
test: /\.(png|jpg)$/,
loader: 'url-loader?limit=8192'
}]
}
};
通過比較可以看出開發模式和發佈模式文件的配置是不同的,比如webpack.HotModuleReplacementPlugin,熱模塊替換,它的作用在於文件內容更改時實時打包刷新頁面,在發佈模式下是不需要的,發佈模式需要做的是編譯、壓縮、提取公共部分生成vendor等工作。