webpack1配置
varwebpack=require('webpack');
varpath=require('path');
varExtractCss=require('extract-text-webpack-plugin');
varHtmlBuild=require('html-webpack-plugin');
module.exports={
entry:'./src/js/index.js',
output:{
path:path.join(__dirname,'./dist'),
filename:'js/bundle.js'
},
module:{
loaders:[
{test:/\.css$/,loader:ExtractCss.extract('style-loader','css-loader')},
{test:/\.less$/,loader:ExtractCss.extract('style-loader','css-loader!less-loader')},
{test:/\.(png|jpg|gif)$/,loader:'url-loader?limit=30720&name=../img/[name].jpg'},
{test:/\.js$/,exclude:/node_modules/,loader:"babel-loader"}
]
},
plugins:[
newwebpack.BannerPlugin('这是用于给每个页面增加注释的'),
newwebpack.optimize.UglifyJsPlugin({
compress:{
warnings:false
}
}),//这是压缩css的
newExtractCss('css/index.css'),
newHtmlBuild({
template:'./src/index.html',
hash:true,
favicon:'./src/img/favicon.ico',
minify:{
collapseWhitespace:false,//压缩html
removeComments:true//清除注释
}
})
],
devServer:{
contentBase:'./dist',
inline:true
}
}
webpack2配置
var webpack=require('webpack');
var path=require('path');
var ExtractCss=require('extract-text-webpack-plugin');
var HtmlBuild=require('html-webpack-plugin');
//node.js是基于commonjs规范，amd,cmd属于浏览器端规范
module.exports={
entry:'./src/js/app.js',
output:{
path:path.join(__dirname,'./dist'),
filename:'js/bundle.js'
},
module:{
rules:[
//{ test:/\.css$/,use:['style-loader','css-loader']},
{test:/\.css$/,use:ExtractCss.extract({
fallback:'style-loader',
use:'css-loader'
})},
{
test:/\.less$/,use:ExtractCss.extract({
fallback:'style-loader',
use:['css-loader','less-loader']
})
},
{test:/\.(jpg|png|gif)$/i,use:[
{
loader:'url-loader',
options:{
limit:30000,
name:'../tu/[name].[ext]'
}
}
]},
{
test: /\.js$/,
exclude: /(node_modules|bower_components)/,
use: {
loader: 'babel-loader',
options: {
presets: ['env']
}
}
}
]
},
plugins:[
new webpack.BannerPlugin('这是一个测试项目，作者：1507'),
new ExtractCss('css/webpack2style.css'),
new HtmlBuild({
template:'./src/index.html',
filename:'default.html',
hash:true,
favicon:'./src/imgs/favicon.ico',
minify:{
collapseWhitespace:true,
removeComments:true
}
})
],
devServer:{
contentBase:'./dist',
inline:true,
port:9999
}
}
webpack1和webpack2配置的区别
webpack1.x升级到webpack2.x
1.webpack2.x (1的时候用1.x)
2.webpack-dev-server2.x （1的时候用1.x 注意全局也用1.x）
3.babel-loader 7.x （1的时候用6.x）
4.extract-text-webpack-plugin2.x （1的时候用1.x）