- 如果我们的项目比较大，打包的话会比较慢，这个时候我们就可以使用多线程打包了。首先安装
cnpm i happypack --save-dev
然后我们在webpack.config.js中配置
image.png
let path = require('path')
let HtmlWebpackPlugin = require('html-webpack-plugin')
let webpack = require('webpack')
let HappyPack = require('happypack')
module.exports = {
mode: 'development',
entry: {
home: './src/index.js'
},
output: {
filename: '[name].js', // 打包出对应的名字
path: path.resolve(__dirname, 'dist')
},
devServer: {
port: 1234,
open: true,
contentBase: './dist'
},
module:{
rules:[
{
test: /\.js$/,
exclude: /node_modules/,
include: path.resolve('src'),
use: 'Happypack/loader?id=js' // loader指向happypack插件
},
{
test: /\.css$/,
use: 'Happypack/loader?id=css'
}
]
},
plugins: [
new HappyPack({ // 插件里面对应需要的loader
id: 'js',
use: [{
loader: 'babel-loader',
options:{
presets:[
'@babel/preset-env',
'@babel/preset-react'
]
}}]
}),
new HappyPack({
id: 'css',
use: ['style-loader', 'css-loader']
}),
new webpack.DllReferencePlugin({
manifest: path.resolve(__dirname, 'dist', 'manifest.json'), //先去清单查找，找不到的话再去打包react react-dom
}),
new HtmlWebpackPlugin({
template: './index.html',
filename: 'index.html'
})
],
}
然后我们打包
image.png
可以看到起了三个线程，但是我们演示的代码比较小，启动线程占用的资源更多，只能只是演示一下；
- 接下来说一下import 和 require对wepback的自动优化的影响；
我们在src先创建一个工具js。里面暴露加减两个方法
util.js
const add = (a,b) =>{
return a+b
}
const minus = (a,b)=>{
return a-b
}
export default{
add,minus
}
然后我们在index.js中引入
import util from './util.js'
console.log(util.add(1,2))
启动服务，在控制台可以看到 打印成功
image.png
接下来我们把import换成require看看
index.js
// import util from './util.js'
let util = require('./util.js')
console.log(util)
console.log(util.add(1,2))
image.png
控制台可以看到，add方法被挂在到default下了。所以index.js需要这么写
// import util from './util.js'
let util = require('./util.js')
console.log(util)
console.log(util.default.add(1,2))
image.png
好，这时第一个区别。然后我们把webpack.config.js中的mode改为生成环境 production 打包代码后查找下minus方法（不需要）有没有打包
require
image.png
import
image.png
可以看到import方式比require方式更友好，这也是推荐大家用import引入的原因；
- 在收一个webpack自动优化项，scope hosting 作用域提升；
比如我们在index.js中定义多个变量
let a = 1;
let b = 2;
let c = 3;
let d = a + b + c;
console.log(d, '66666666666666666666666')
打包后会直接打印6 ，不用再js中定义多个变量
image.png
