webpack

webpack成神之路(九)

2019-05-26  本文已影响0人  AAA前端
  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

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

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

  1. 在收一个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
上一篇下一篇

猜你喜欢

热点阅读