webpack CommonsChunkPlugin 提取公共代碼

一、項目結構

二、部分代碼

module.js

console.log('module.js');

index文件夾下的index.js

require('../module.js');
console.log('首頁-index文件');

login文件夾下的index.js

 

require('../module.js');
console.log('登陸頁-index文件');

三、webpack.config.js

var htmlWebpackPlugin = require('html-webpack-plugin');
var webpack = require('webpack');
module.exports = {
    //    entry: './src/app.js',
    entry: {
        'login': ['./src/page/login/index.js'],
        'index': ['./src/page/index/index.js']
    },
    output: {
        path: __dirname + '/dist',
        filename: 'js/[name].js'
    },
    //將外部變量或者模塊加載進來
    externals: {
        'jquery': 'window.jQuery'
    },
    module: {
        loaders: [{
                test: /\.js$/,
                //如下目錄不處理
                exclude: /node_modules/,
                //只處理如下目錄
                include: /src/,
                loader: "babel-loader",
                //配置的目標運行環境（environment）自動啓用須要的 babel 插件
                query: {
                    presets: ['latest']
                }
            },
            //css 處理這一塊
            {
                test: /\.css$/,
                use: [
                    'style-loader',
                    {
                        loader: 'css-loader',
                        options: {
                            //支持@important引入css
                            importLoaders: 1
                        }
                    },
                    {
                        loader: 'postcss-loader',
                        options: {
                            plugins: function() {
                                return [
                                    //必定要寫在require("autoprefixer")前面，不然require("autoprefixer")無效
                                    require('postcss-import')(),
                                    require("autoprefixer")({
                                        "browsers": ["Android >= 4.1", "iOS >= 7.0", "ie >= 8"]
                                    })
                                ]
                            }
                        }
                    }
                ]
            },
            //less 處理這一塊
            {
                test: /\.less$/,
                use: ['style-loader',
                    {
                        loader: 'css-loader',
                        options: {
                            //支持@important引入css
                            importLoaders: 1
                        }
                    },
                    {
                        loader: 'postcss-loader',
                        options: {
                            plugins: function() {
                                return [
                                    //必定要寫在require("autoprefixer")前面，不然require("autoprefixer")無效
                                    require('postcss-import')(),
                                    require("autoprefixer")({
                                        "browsers": ["Android >= 4.1", "iOS >= 7.0", "ie >= 8"]
                                    })
                                ]
                            }
                        }
                    },
                    'less-loader'
                ]
            },
            //處理html模板
            {
                test: /\.html$/,
                use: {
                    loader: 'html-loader'
                }
            },
            //處理圖片
            {
                test: /\.(png|jpg|gif|svg)$/i,
                loaders: [
                    //小於8k的圖片編譯爲base64，大於10k的圖片使用file-loader            
                    'url-loader?limit=8192&name:img/[name]-[hash:5].[ext]',
                    //圖片壓縮
                    'image-webpack-loader'
                ]

            }
        ]
    },
    plugins: [
        new htmlWebpackPlugin({
            template: 'index.html',
            filename: 'index.html'
        }),
        // 獨立通用模塊到js/base.js
        new webpack.optimize.CommonsChunkPlugin({ //公共塊的塊名稱
            name: 'common', filename: 'js/base.js' })
    ]
}

四、測試

（1）webpack.config.js

// 獨立通用模塊到js/base.js
        new webpack.optimize.CommonsChunkPlugin({
            //公共塊的塊名稱
            name: 'common'
        })

 

輸出：

 

（2）

// 獨立通用模塊到js/base.js
        new webpack.optimize.CommonsChunkPlugin({
            //公共塊的塊名稱
            name: 'common',
            //生成的文件名
            filename: 'js/common.js'
        })