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