开发环境的需求:
模块热更新
sourceMap
接口代理
代码规范检查
生产环境的需求
提取公共代码
压缩混淆
文件压缩/base64编码
去除无用的代码
二者共同点:
同样的入口
同样的代码处理(loader处理)
同样的解析配置
使用webpack-merge拼接开发环境和生产环境:
配置文件:
webpack.dev.conf.js
webpack.prod.conf.js
webpack.common.conf.js
webpack.dev.conf.js
module.exports = {
devtool:'cheap-module-source-map',
devServer:{},
plugins:[
new webpack.HotModuleReplacementPlugin(),
new webpack.NamedModulesPlugin(),
]
}
webpack.prod.conf.js
module.exports = {
plugins:[
new PurifyWebpack({
paths:glob.sync({
'./src/*.js'
})
}),
new webpack.optimize.CommonsChunkPlugin({
name:'manifest'
}),
new HtmlInlinkChunkPlugin({
inlineChunkd:['manifest']
}),
new webpack.optimize.UglifyJsPlugin(),
new CleanWebpackPlugin(['dist']),
]
}
webpack.common.conf.js
const productionConfig = require('./webpack.prod.conf.js')
const delevopmentConfig= require('./webpack.dev.conf.js')
const merge = require('webpack-merge');
const ExtractTextWebpackPlugin= require('extract-text-webpack-plugin');
const HtmlWebpackPlugin= require('html-webpack-plugin');
const generateConfig = env =>{
const extracLess = new ExtractTextWebpackPlugin({
filename:'css/[name]-bundle.css'
})
const fileLoader = env==='production'
?[{
loader:'file-loader',
options:{
name:'[name]-[hash:5].[ext]',
outputPath:'assets/imgs/'
}
}]
:[{
loader:'url-loader',
options:{
name:'[name]-[hash:5].[ext]',
limit: 1000,
outputPath:'assets/imgs/'
}
}]
const cssLoaders = [
{
loader:'css-loader',
option:{sourceMap:env==='development'?true:false}
},
{
loader:'postcss-loader',
option:{
ident:'postcss',
plugins:[
require('postcss-cssnext')
].concat(env==='production'
?require('postcss-sprites')({spritePath:'dist/assets/img',retina:true})
:[])
}
},
{loader:'less-loader'},
]
const scriptLoader = ['babel-loader'].concat(env == 'production'?
[]:
[{loader:'eslint-loader',options:{
formatter: require('eslint-friendiy-formatter')
}}]),
];
const styleLoader = env === 'production'
?extractLess.extract({fallback:'style-loader',use:cssLoaders})
:[{loader:'style-loader'}].concat(cssLoaders )
return{
entry:{},
output:{},
resolve:{alias:{},...},
module:{
rules:[
{
test:/\.js$/,
use:scriptLoader
},
{
test:/\.less$/,
use:styleLoader
},
{
text:/\.(png|jpg|jpeg|gif)$/,
use: fileLoader.concat(env === 'production'?[{
loader:'img-loader',
options:{
pngquant:{quality:80}
}
}]:[])
},
{
test:/\.(eot|woff|woff2|ttf|svg)$/,
use:fileLoader
}
]
},
plugins:[
extractLess,
new HtmlWebpackPlugin({
filename:'index.html',
template:'index.html',
minify:{
collapseWhitespace:true
}
}),
new CleanWebpackPlugin(['dist']),
new webpack.ProvidePlugin({
$:'jquery'
})
]
}
}
module.exports = env =>{
let config = env ==='production'?productionCOnfig: delevopmentConfig
return merge(generateConfig(env),config)
}
scripts
“scripts”:{
“server”:”webpack-dev-server –env development –open –config build/webpack.common.config.js”,
“”build”:”webpack –env peoduction –config build/webpack.common.config.js”,
}
.babelrc
{preset:['env']}