webpack开发环境配置和生产环境配置

webpack开发环境配置和⽣产环境配置开发环境配置
在开发环境下，我们⾸先考虑的是⽅便开发，⽅便代码调试，不需要考虑代码合并和css样式分离这些。

这⾥主要说三个：1.css模块化；2.模块热替换功能；3.source-map（代码映射）
// 开发环境打包配置
const path = require('path');
const webpack = require('webpack');
const base = require('./webpack.config.base')
const dfPath = require('./path')
// webpack配置合并⼯具
const merge =require('webpack-merge')
const RS = (...arg)=>path.resolve( __dirname , ...arg )
// 合并⽅式配置
let strategyMerge = merge.strategy({
entry: 'prepend'
});
let config = {
entry: {
app: path.resolve(dfPath.root,'src/app.js')
},
output: {
path: dfPath.dist,
filename: '[name].bundle.js',
publicPath: '/',
chunkFilename: '[name].sepChunk.js'
},
module:{
rules: [
{
test: /\.js$/,
use:['babel-loader'],
exclude: [
dfPath.node_modules
]
},
{
test:/\.css$/,
use:[
'style-loader',
{
loader:'css-loader',
options:{
// css模块化，⽅便多⼈开发
module:true,
// 定义模块化css后的类名（默认为hash值，可读性差）path:路劲； name：⽂件名； local：本地定义的className localIdentName: '[path][name]__[local]--[hash:base64:5]'
},
}
],
// 排除的⽂件，遇到这些⽂件不会⽤当前 loader 处理，也就不会模块化
exclude:[
RS('./src/common'),
RS('node_modules')
]
},
{
test:/\.css$/,
use:['style-loader','css-loader'],
include:[
RS('./src/common'),
RS('node_modules')
]
},
{
test: /\.(png|jpg|jpeg|gif)$/,
use: ['url-loader?limit=8192'],
}
]
},
plugins:[
// 模块热替换功能
new webpack.HotModuleReplacementPlugin()
],
// 代码映射，⽅便报错时，找到对应的源代码
devtool: 'cheap-module-eval-source-map',
devServer:{
// 服务器打包后，输出的资源路劲
publicPath:'/',
open:true
}
};
// 导出合并后的webpack配置
module.exports = strategyMerge( base , config );
⽣产环境
相⽐开发环境，⽣产环境打包是要最后发布到服务器部署的代码，我们需要尽量保持代码简洁，加载性能最优，不需要调试辅助⼯具。

我们从这⼏个⽅⾯优化：1.公共模块拆分，单独打包；2. css⽂件分离，单独打包输出；3.代码压缩；
// ⽣产环境配置
const webpack = require('webpack');
const base = require('./webpack.config.base')
const path = require('path');
const dfPath = require('./path');
const merge = require('webpack-merge');
// 压缩⼯具
const ClosureCompilerPlugin = require('webpack-closure-compiler');
// css单独打包插件
const extractTextWebpackPlugin = require('extract-text-webpack-plugin');
const extractCSS = new extractTextWebpackPlugin('assets/css/[name]_[contenthash:6].css');
// weback合并配置
let strategyMerge = merge.strategy({
entry: 'replace',
output: 'replace',
module:{
rules: 'replace'
}
});
let config ={
entry: {
// 公共模块拆分，这些代码会单独打包，⼀般我们会把引⽤的框架⽂件拆分出来，⽅便浏览器缓存，节省资源。

vender:['react'],
app: path.resolve(dfPath.root,'src/app.js')
},
output: {
path: dfPath.dist,
filename: 'assets/js/[name]_[chunkhash].bundle.js',
publicPath: '/',
chunkFilename: 'assets/js/[name].sepChunk.js',
hashDigestLength: 6
},
module:{
rules: [
{
test: /\.js$/,
use:['babel-loader'],
exclude: [
dfPath.node_modules
]
},
/* 开启 css单独打包和 css模块化的配置 */
{
test: /\.css$/,
use: extractCSS.extract({
use: [
{
loader: 'css-loader',
options:{
modules: true
}
]
})
},
{
test: /\.(png|jpg|jpeg|gif)$/,
use: [
{
loader: 'url-loader',
options:{
limit:8192,
name: '[name]_[hash].[ext]',
outputPath: 'assets/img/'
}
}
],
},
{
test: /\.(mp4|ogg|svg|ico)$/,
use: [
{
loader: 'file-loader',
options:{
name: '[name]_[hash].[ext]',
outputPath: 'assets/media/'
}
}
]
},
{
test: /\.(woff|woff2)(\?v=\d+\.\d+\.\d+)?$/, use: [
{
loader: 'url-loader',
options:{
limit:10000,
name: '[name]_[hash].[ext]',
outputPath: 'assets/font/',
mimetype: 'application/font-woff'
}
}
]
},
{
test: /\.ttf(\?v=\d+\.\d+\.\d+)?$/,
use: [
{
loader: 'url-loader',
options:{
limit:10000,
name: '[name]_[hash].[ext]',
outputPath: 'assets/font/',
mimetype: 'application/octet-stream'
}
}
]
},
{
test: /\.eot(\?v=\d+\.\d+\.\d+)?$/,
use: [
{
loader: 'file-loader',
options:{
name: '[name]_[hash].[ext]',
outputPath: 'assets/font/',
}
}
]
},
{
test: /\.svg(\?v=\d+\.\d+\.\d+)?$/,
use: [
{
loader: 'url-loader',
options:{
limit:10000,
name: '[name]_[hash].[ext]',
outputPath: 'assets/font/',
mimetype: 'image/svg+xml'
}
}
},
]
},
plugins:[
extractCSS,
// 设置 process.env（⽣产环境）环境变量的快捷⽅式。

new webpack.EnvironmentPlugin({
NODE_ENV: 'production'
})
,new ClosureCompilerPlugin()
],
devtool: 'source-map'
};
module.exports = strategyMerge(base,config);。