var path = require('path');
var webpack = require('webpack');
var autoprefixer = require('autoprefixer');
var HtmlWebpackPlugin = require('html-webpack-plugin');
var ExtractTextPlugin = require('extract-text-webpack-plugin');
module.exports = {
entry: { //配置入口文件，有几个写几个
index: './src/js/page/index.js',
list: './src/js/page/list.js',
article: './src/js/page/article.js',
},
output: {
path: path.join(__dirname, 'public'), //输出目录的配置，模板、样式、脚本、图片等资源的路径配置都相对于它
publicPath: '/public/', //模板、样式、脚本、图片等资源对应的server上的路径
filename: 'js/[name].js', //每个页面对应的主js的生成配置
chunkFilename: 'js/[id].chunk.js' //chunk生成的配置
},
devServer: {
contentBase: './',
host: 'localhost',
port: 9090, //默认8080
inline: true, //可以监控js变化
historyApiFallback: true,//不跳转
hot: true //热启动
},
module: {
loaders:[
{
test: /\.js$/,
loader: 'babel-loader?presets=es2015'
},{
test: /\.css$/,
use: ExtractTextPlugin.extract({ fallback: "style-loader", use: ["css-loader"] })
},{
test: /\.less/,
use: ExtractTextPlugin.extract({ fallback: "style-loader", use: ["css-loader", "autoprefixer-loader", "less-loader"] })
},{
//html模板加载器，可以处理引用的静态资源，默认配置参数attrs=img:src，处理图片的src引用的资源
//比如你配置，attrs=img:src img:data-src就可以一并处理data-src引用的资源了，就像下面这样
test: /\.html$/,
loader: "html-loader?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（8KB）的图片转成base64码
test: /\.(png|jpg|gif)$/,
loader: 'url-loader?limit=8192&name=./img/[hash:5].[ext]'
}
]
},
externals: { // 遇到require这些时, 不需要再编译. 适合那些常用的库, 已经在页面通过<script>引入了, 就无需都打包到一起了
jquery: 'jQuery',
},
plugins: [
// new webpack.ProvidePlugin({ //加载jq
// $: 'jquery',
// jQuery: 'jquery'
// }),
newwebpack.optimize.CommonsChunkPlugin({
name: 'ymsj', // 将公共模块提取，生成名为`ymsj`的chunk
chunks: 'all', //提取哪些模块共有的部分
minChunks: 3 // 提取至少3个模块共有的部分
}),
newExtractTextPlugin('css/[name].css'),//单独使用link标签加载css并设置路径，相对于output配置中的publickPath
newHtmlWebpackPlugin({//根据模板插入css/js等生成最终HTML
favicon: './src/img/favicon.ico', //favicon路径，通过webpack引入同时可以生成hash值
filename: './view/index.html', //生成的html存放路径，相对于path
template: './src/view/index.html', //html模板路径
inject: 'body', //js插入的位置，true/'head'/'body'/false
hash: true, //为静态资源生成hash值
chunks: ['ymsj', 'index'],//需要引入的chunk，不配置就会引入所有页面的资源
minify: { //压缩HTML文件
removeComments: false, //移除HTML中的注释
collapseWhitespace: false //删除空白符与换行符
}
}),
newHtmlWebpackPlugin({//根据模板插入css/js等生成最终HTML
favicon: './src/img/favicon.ico', //favicon路径，通过webpack引入同时可以生成hash值
filename: './view/list.html', //生成的html存放路径，相对于path
template: './src/view/list.html', //html模板路径
inject: true, //js插入的位置，true/'head'/'body'/false
hash: true, //为静态资源生成hash值
chunks: ['ymsj', 'list'],//需要引入的chunk，不配置就会引入所有页面的资源
minify: { //压缩HTML文件
removeComments: true, //移除HTML中的注释
collapseWhitespace: false //删除空白符与换行符
}
}),
newHtmlWebpackPlugin({//根据模板插入css/js等生成最终HTML
favicon: './src/img/favicon.ico', //favicon路径，通过webpack引入同时可以生成hash值
filename: './view/article.html', //生成的html存放路径，相对于path
template: './src/view/article.html', //html模板路径
inject: true, //js插入的位置，true/'head'/'body'/false
hash: true, //为静态资源生成hash值
chunks: ['ymsj', 'article'],//需要引入的chunk，不配置就会引入所有页面的资源
minify: { //压缩HTML文件
removeComments: true, //移除HTML中的注释
collapseWhitespace: false //删除空白符与换行符
}
}),
newwebpack.BannerPlugin('白山羊案例V2.0.0 2017-9 Wginit '),
newwebpack.optimize.OccurrenceOrderPlugin(),
newwebpack.optimize.UglifyJsPlugin(),
newwebpack.HotModuleReplacementPlugin()//热加载
],
};
