Webpack如果有时间的话还是看 WebPack中文网站。
Webpack有四个核心概念 入口(entry)、输出(output)、loader、插件(plugins)。
module.exports = {
// 打包模式之一，可以用这个打包开发环境，速度较快，但是安全性不足
devtool: 'eval-source-map',
// 源文件，从这个文件引申出去的所有文件的来源，这个文件中多有import的都会被一起打包。
entry: __dirname + "/app/main.js",
// 输出文件的名字以及输出路径
output: {
path: __dirname + "/public",
filename: "bundle.js"
},
// JSON loader
module: {
loaders: [
{
test: /\.css$/,
loader: "style-loader!css-loader"
},
{
test: /\.less$/,
loader: "style-loader!css-loader!less-loader"
},
{
test: /\.js$/,
exclude: /node_modules/,
loader: 'babel'
},
{
test: /\.html$/, loader: 'html'
}
]
},
// 插件
plugins: [
new webpack.OldWatchingPlugin(),
new webpack.optimize.CommonsChunkPlugin({
name: 'vendor',
minChunks: function (module) {
return module.context && module.context.indexOf('node_modules') !== -1;
}
})
]
}
比如上面这段代码中，简单的使用了四个概念。
我们挨个仔细看一下
entry
额。这个什么都没有，真没什么可看的，过~
output
下图是output所有的对应的属性
output的所有属性
大概扫一眼就知道，上面列出来的有26种属性（上面写到的）。
属性包括了常用的输出文件命名、输出文件路径等，以及一些不常用的比如注释、将id拼在名字中、热加载的名字命名等。
