webpack成神之路（九）

1. 如果我们的项目比较大，打包的话会比较慢，这个时候我们就可以使用多线程打包了。首先安装 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

可以看到起了三个线程，但是我们演示的代码比较小，启动线程占用的资源更多，只能只是演示一下；

2. 接下来说一下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引入的原因；

3. 在收一个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