react webpack.config.js的配置及註釋

var path = require('path');
var webpack = require('webpack');

/*
extract-text-webpack-plugin插件，
有了它就能夠將你的樣式提取到單獨的css文件裏，
媽媽不再用擔憂樣式會被打包到js文件裏了。
*/
var ExtractTextPlugin = require('extract-text-webpack-plugin');
/*
html-webpack-plugin插件，重中之重，webpack中生成HTML的插件，
具體能夠去這裏查看https://www.npmjs.com/package/html-webpack-plugin
*/
var HtmlWebpackPlugin = require('html-webpack-plugin');

new webpack.DefinePlugin({
"process.env": {
NODE_ENV: JSON.stringify("production")
}
});
module.exports = {
entry: {
//支持數組形式，將加載數組中的全部模塊，但以最後一個模塊做爲輸出,好比下面數組裏面的js,所有壓縮在了vendor這個文件這裏
vendor: ['react','react-dom','react-tappable','underscore','react-router','dva'],
app: [ './render/app.js'],
// app: [ './app.js'],
},

output: {
path: path.join(__dirname, 'dist'), //出口文件，生成一個dist文件，打包後的文件都在這裏裏面
publicPath: '/dist/',
filename: 'js/[name].bundle.js',
chunkFilename: 'js/[id].bundle.js'
},

module: {
loaders: [
{ // es6轉爲es5
test: /\.jsx?$/,
exclude: /node_modules/,
loader: 'babel',
query: {
presets: ['es2015', 'react']
}
},
{ //加載器，加載各個加載器的配置
test: /\.js$/,
loaders: ['react-hot', 'babel'],
include: [path.join(__dirname, 'render'), path.join(__dirname, 'component')]
// include: [path.join(__dirname, 'component')]
},
{
test: /\.(css)$/,
//配置css的抽取器、加載器。'-loader'能夠省去
loader: ExtractTextPlugin.extract('style-loader', 'css-loader')
// loader: 'style-loader!css-loader'
},
{
test: /\.less$/,
//配置less的抽取器、加載器。中間!有必要解釋一下，
//根據從右到左的順序依次調用less、css加載器，前一個的輸出是後一個的輸入
//你也能夠開發本身的loader喲。有關loader的寫法可自行谷歌之。
loader: ExtractTextPlugin.extract('css!less')
},
{
//html模板加載器，能夠處理引用的靜態資源，默認配置參數attrs=img:src，處理圖片的src引用的資源
//好比你配置，attrs=img:src img:data-src就能夠一併處理data-src引用的資源了，就像下面這樣
test: /\.html$/,
loader: "html?attrs=img:src img:data-src"
}, 
{
//文件加載器，處理文件靜態資源
test: /\.(woff|woff2|ttf|eot|svg)(\?v=[0-9]\.[0-9]\.[0-9])?$/,
loader: 'file-loader?name=./fonts/[name].[ext]'
}, 
{
//圖片加載器，雷同file-loader，更適合圖片，能夠將較小的圖片轉成base64，減小http請求
//以下配置，將小於8192byte的圖片轉成base64碼
test: /\.(png|jpg|gif)$/,
loader: 'url-loader?limit=8192&name=./images/[hash].[ext]'
},
{
test: /\.png$/,
loader: 'url?limit=1000&mimetype&name=./images/[name].[ext]',
},
{ 
test: /\.scss$/, 
loader: 'style!css!sass?sourceMap'
}
]
},

plugins: [
new webpack.ProvidePlugin({ //加載jq
$: 'jquery'
}),
new webpack.HotModuleReplacementPlugin(),//熱加載
new webpack.optimize.MinChunkSizePlugin({ //壓縮代碼的意思
compress: {
warnings: false
}
}),
new ExtractTextPlugin('css/[name].css'), //單獨使用link標籤加載css並設置路徑，相對於output配置中的publickPath
new webpack.optimize.CommonsChunkPlugin({
name:'vendor', // 將公共模塊提取，生成名爲`vendors`的chunk.就是將vendor裏面的文件壓縮成一個文件
// chunks: ['react','react-dom','jquery','react-tappable','underscore','react-router'], 
//chunks 提取哪些模塊共有的部分,跟vendor是同樣的
minChunks: Infinity // 提取至少*個模塊共有的部分
}),

//將html打包壓縮
new HtmlWebpackPlugin({ // 模板生成相關的配置，每一個對於一個頁面的配置，有幾個寫幾個
//favicon: './images/favicon.ico', //favicon路徑，經過webpack引入同時能夠生成hash值
filename:'/view/index.html',//生成的html存放路徑，相對於 path
template:'./index.html', //html模板路徑
chunks:['vendors','app'],//區分你想要加載的js，名字要跟entry入口定義的保存一直
inject:true, //容許插件修改哪些內容，包括head與body js插入的位置，true/'head'/'body'/false
hash:true,//爲靜態資源生成hash值，能夠實現緩存
minify:{
removeComments:true,//移除HTML中的註釋
collapseWhitespace:true //刪除空白符與換行符
}
}),
],
//使用webpack-dev-server，提升開發效率
devServer: {
contentBase: './',
host: 'localhost',
port: 3200,
inline: true,
hot: true,
}



};