背景

在阅读这篇文章之前，我们先来看看下面这个webpack的配置文件，如果�在此之前你已经在熟练使用webpack了，那本文给你的收获也许就比较有限，你可以快速浏览或直接跳过；如果你还对很多选项存在着疑惑，那花一段时间慢慢阅读本文，你的疑惑一定一个一个都会消失；如果你以前没怎么接触过Webpack，而你又你对webpack感兴趣，那么动手用wenpack写一个demo，写完以后你会发现你已明明白白的走进了Webpack的大门。

var webpack=require('webpack');
var path=require('path');
var fs=require('fs');
var HtmlWebpackPlugin=require('html-webpack-plugin');
var OpenBrowserPlugin=require('open-browser-webpack-plugin');
var entry={"common/core":[
'react','react-dom','react-router','react-redux','react-router-redux','redux- thunk','classnames','superagent',],
'index':'./src/entry/index.js'
};
module.exports = {
entry: entry,
resolve: {
modulesDirectories: ['', 'src', 'node_modules', path.join(__dirname, '../node_modules')],
extensions: ['', '.web.js', '.js', '.json',] },
output: {
path: path.join(__dirname, 'dist'),
publicPath: "/dist/",
filename: '[chunkhash:5].[name].js' },
module: {
loaders: [
{
test: /.js$/,
exclude: /(node_modules|typings)/,
include: /src/,
loaders: ['react-hot','babel-loader'],
},
{
test: /.json$/,
loader: 'json-loader'
},
{
test: /.less/,
loader: ExtractTextPlugin.extract( 'style', 'css!less')
},
{
test: /.css$/,
loader: ExtractTextPlugin.extract('style', 'css!postcss' )
},
{
test: /ts-helpers/,
loader: 'imports?this=>window'
},
{
test: /.(jpe?g|png|gif|svg)$/i,
loader: 'url-loader?limit=8192'
}
]
},
postcss: [ ],
plugins: [
new webpack.optimize.CommonsChunkPlugin('common/core', 'common/core.js'),
new ExtractTextPlugin('styles.css'),
new webpack.NoErrorsPlugin(),
new HtmlWebpackPlugin({
inject: false,
template: require('./src/entry/html-template'),
appMountId: 'app',
files: {
"js": ["assets/head_bundle.js", "assets/main_bundle.js"],
},
hash:true,
cache:false,
minify:{
removeComments:true,//移除HTML中的注释
collapseWhitespace:false//删除空白符与换行符
}
}),
new webpack.DefinePlugin({
DEV: true,
'process.env.NODE_ENV': true }),
new OpenBrowserPlugin({url: http://localhost:8890}),
]};

entry

1. entry的值是字符串，这个字符串对应的模块会在启动的时候加载
2. entry的值是数组，这个数组内所有模块会在启动的时候加载，数组的最后一个元素作为export
3. entry的值是对象，可以构建多个bundle

output

输出文件，publicPath 输出文件存放路径 filename 输出文件名称

plugins

插件项，这里我们使用了一个 CommonsChunkPlugin的插件，它用于提取多个入口文件的公共脚本部分，然后生成一个 core.js 来方便多页面之间进行复用。

ExtractTextPlugin

抽取css,less到指定的文件，减小js文件包大小

module.loaders

最关键的一块配置。它告知 webpack 每一种文件都需要使用什么加载器来处理。 所有加载器需要使用npm来加载