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