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);