webpack 常用功能

by: kelen / 2016-10-27

1.使用公用CDN

当我们使用cdn来引入插件,例如jquery,moment插件,配置externals属性,这时候打包就会排除moment模块,加快打包速度

externals: {
    moment: true
}

注意,必须在html文件中引入对应的cdn

<script src="//apps.bdimg.com/libs/moment/2.8.3/moment-with-locales.min.js"></script>

2. CommonsChunkPlugin,打包公用模块到单独文件

当我们需要把公用的模块合成到一个文件,避免重复打包,提高打包的效率

module.exports = {
    entry: {
        pageA: "./pageA",
        pageB: "./pageB",
        pageC: "./pageC"
    },
    output: {
        path: "./dist",
        filename: "[name].bundle.js",
        chunkFilename: "[id].chunk.js"
    },
    plugins: [
        // 通用文件
        new webpack.optimize.CommonsChunkPlugin({
            name: "common",                    // 公用模块名
            filename: "commons.bundle.js",       // 输出文件名
            minChunks: 2,                   // 至少几个模块用到,才会打包到commons.bundle.js
            chunks: ["pageA", "pageB", "pageC"]      // 在这pageA和pageB,pageC模块中, 至少有2次用的模块打包到公共模块, 如果没声明, 就默认搜索所有模块
        })
    ]
}

// 另一个例子,打包所有公用的第三方库
module.exports = {
    entry: {
        index: './app/main.js',
        vendor: ['react', 'react-dom', 'react-router', 'classnames']
    },
    output: {
        path: path.resolve(__dirname, './dist'),
        filename: "[name].[chunkHash:8].js",
        publicPath: '',
        chunkFilename: "[name].[chunkHash:8].js",
    },
    plugins: [
        new webpack.optimize.CommonsChunkPlugin({
            names: ['vendor'],
        }),
    ]
}

上面代码的功能是:在pageA,pageB,pageC模块中,如果有两个模块有依赖,就打包到commons.bundle.js文件中去,然后在页面需要单独引用

<!-- 需要单独引用后才能引入pageA文件 -->
<script src="commons.bundle.js" charset="utf-8"></script>
<script src="pageA.bundle.js" charset="utf-8"></script>

3. UglifyJsPlugin,压缩打包的文件

plugins: [
    //压缩打包的文件
    new webpack.optimize.UglifyJsPlugin({
        compress: {
            //supresses warnings, usually from module minification
            warnings: false
        }
    })
]

4. transfer-webpack-plugin,复制文件到线上目录

var TransferWebpackPlugin = require('transfer-webpack-plugin');
//其他节点省略
plugins: [
    //把www文件复制到src目录下
    new TransferWebpackPlugin([
        {from: 'www'}
    ], path.resolve(__dirname,"src"))
]

 


最新发布
热门文章