bilibili-webpack-03

P22 dllPlugin 动态链接库

• 将第三方库打包分离，后续打包时直接引入使用而不用再次打包编译
• dll.config.js

	output: {
    	filename: '_dll_[name].js',
        path: path.resolve(__dirname,'dist'),
        library: '_dll_[name]'
    },
    plugins: [{
    	new webpack.DllPlugin({
        	name: '_dll_[name]', // name === output.library
            path: path.resolve(__dirname, 'dist', 'manifest.json') // 任务清单文件地址
        })
    }]

• html 引入dll打包生成的结果 output.filename <script src="dll.js"></script>
• webpack.config.js

plugins: [
	// new HtmlWebpackPlugin({
    // 	chunks: ['dll.js'] // 此处应为最终文件名称
    // }),
	new webpack.DllReferencePlugin({
     	// 取DllPlugin.path生成的文件路径
    	manifest: path.resolve(__dirname, 'dist', 'manifest.json')
    })
]

P23 happypack 多线程打包

const Happypack = require('happypack')

	module.rules: [{
    	test: /\.js$/,
        include: path.resolve('src'),
        use: 'Happypack/loader?id=js' // use原来配置的loader放置到Happypack内
    },{
    	test: /\.css$/,
        include: path.resolve('src'),
        use: 'Happypack/loader?id=css'
    }],
    plugins: [{
    	new Happypack({
        	id: 'js',
            use: [{
            	loader: 'babel-loader',
                options: {
                	presets: [
                    	'@babel/preset-env',
                        '@babel/preset-react'
                    ]
                }
            }]
        }),
        new Happypack({
        	id: 'css',
            use: ['style-loader', 'css-loader']
        })
    }]

P24 webpack自带优化

• scope hosting 作用域提升
• treeShaking 屏蔽无引用函数 只适用于import引入的，require不支持treeShaking

P25 抽取公共代码

• webpack2由commonChunksPlugins实现

optimization.splitChunks: {
	cacheGroups: {
    	common: {
        	minSize: 0, // 最小体积
            minChunks: 2, // 最小用次数
            chunks: 'initial'
        },
        vendor: {
        	test: /node_modules/, //抽离三方文件
            minSize: 0, // 最小体积
            minChunks: 2, // 最小用次数
            chunks: 'initial',
            priority: 1 // 优先级
        }
    }
}

P26 懒加载

• npm i -D @babel/plugin-syntax-dynamic-import // 目前已支持

module.rules.use.plugins: [
	'@babel/plugin-syntax-dynamic-import'
]
button.addEventListener('click', function(){
	// es6草案中的语法， jsonps实现动态加载文件
    import('./source.js').then(data => {
    	console.log(data.default)
    })
})

P27 HRM 模块热更新

• webpack.config.js

devServer: {
	hot: true
},
plugins: [
	new webpack.NamedModulesPlugin(), // 打印更新的模块路径
    new webpack.HotModuleReplacementPlugin() // 热更新插件
]

• main.js

if (module.hot) {
	module.hot.accept('path', () => {
    	// do something...
    })
}