webpack

webpack成神之路(十)

2019-05-29  本文已影响0人  AAA前端

1.公共模块的抽离(单页面没有必要,一般是多页面的)
我们在src下创建四个js。分别是a.js,b.js,index.js, home.js;
a.js

console.log('a.js')

b.js

console.log('b.js')

index.js

import './a.js'
import './b.js'

console.log('index.js')

home.js

import './a.js'
import './b.js'

console.log('home.js')

然后既然是多页面,那我们webpack.config.js中的entry入口,就要配置了

let path = require('path')
module.exports = {
    mode: 'production', // production  development
    entry: {// 配置多入口
        home: './src/index.js',
        index: './src/index.js',
    },
    output: {
        filename: '[name].js',   // 打包出对应的名字
        path: path.resolve(__dirname, 'dist')
    },
    devServer: {
        port: 1234,
        open: true,
        contentBase: './dist'
    },
    module:{
        rules:[]
    },
    plugins: [],
}

然后运行打包可以看到打包后的文件里面都会出现a.js b.js


image.png
    // 优化
    optimization:{
        splitChunks:{ // 代码块分割
            cacheGroups:{ // 缓存组
                common:{  // 公共模块
                    chunks: 'initial', //刚开始就需要抽离
                    minSize: 0 , // 多大的会被抽离
                    minChunks: 2, //重复2次以上会被抽离
                }
            }
        }
    },

打包后可以看到公共模块被抽离出来了


image.png
import $ from 'jquery';
console.log($)

然后我们打包


image.png

虽然也抽离了,但第三方模块我们需要单独抽离出来。我们就在加一项,比如叫verdor

let path = require('path')
module.exports = {
    mode: 'production', 
    entry: {// 配置多入口
        home: './src/index.js',
        index: './src/index.js',
    },
    // 优化
    optimization:{
        splitChunks:{ // 代码块分割
            cacheGroups:{ // 缓存组
                common:{  // 公共模块
                    chunks: 'initial', //刚开始就需要抽离
                    minSize: 0 , // 多大的会被抽离
                    minChunks: 2, //重复2次以上会被抽离
                },
                vendor:{
                    priority: 1, // 优先级 先抽离node_modules 之后再抽离common。不然jquery 也会被抽离到common中
                    test: /node_modules/, // 匹配到才抽离
                    chunks: 'initial',
                    minSize: 0,
                    minChunks: 2
                }
            }
        }
    },
    output: {
        filename: '[name].js',   // 打包出对应的名字
        path: path.resolve(__dirname, 'dist')
    }
}

运行打包可以看到jquery被单独抽离出来了


image.png
  1. 懒加载(vue react 懒加载的原理)
    我们在src先创建home.js 和index.js
    home.js
module.exports = 'home.js'

index.js 创建button按钮,点击的时候才加载home.js

var button = document.createElement('button');

button.innerText = '按钮';

button.addEventListener('click', function(){
    console.log('click')
    import('./home.js').then(function(data){
        console.log('hhhhhh', data)
    })
})

document.body.append(button)

webpack.config.js

let path = require('path')
let HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
    mode: 'development', // production  development
    entry: {
        index: './src/index.js',
    },
    output: {
        filename: '[name].js',   // 打包出对应的名字
        path: path.resolve(__dirname, 'dist')
    },
    devServer: {
        port: 1234,
        open: true,
        contentBase: './dist'
    },
    module:{
        rules:[]
    },
    plugins: [
        new HtmlWebpackPlugin({
            template:'./index.html'  
        })
    ],
}

启动服务
没点击前,只加载了index.js


image.png

控制台没有打印东西


image.png

点击按钮之后控制台打印了home.js的对象


image.png

网络也看到加载了0.js。(就是home.js的内容)


image.png
  1. 我们开发启动服务时,每次改东西,页面都会刷新,我们如果不要刷新,那就需要配置热更新了。
    devServer中配置hot: true;
    plugins 里面配置
        new webpack.NamedModulesPlugin(), // 打印更新的模块路径
        new webpack.HotModuleReplacementPlugin() // 热更新插件

webpack.config.js

let path = require('path')
let webpack = require('webpack')
let HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
    mode: 'development', // production  development
    entry: {
        index: './src/index.js',
    },
    output: {
        filename: '[name].js',   // 打包出对应的名字
        path: path.resolve(__dirname, 'dist')
    },
    devServer: {
        hot: true,
        port: 1234,
        open: true,
        contentBase: './dist'
    },
    module:{
        rules:[]
    },
    plugins: [
        new HtmlWebpackPlugin({
            template:'./index.html'  
        }),
        new webpack.NamedModulesPlugin(), // 打印更新的模块路径
        new webpack.HotModuleReplacementPlugin() // 热更新插件
    ],
}

然后我们在index.js 和home.js中写代码
home.js

module.exports = 'home.js'

index.js

import str from './home.js'

console.log(str)

// 如果支持热更新, 接受home.js,更新之后重新引入home.js
if(module.hot){
    module.hot.accept('./home.js', function(){
        console.log('文件更新了')
        var str = require('./home.js');
        console.log(str)
    })
}

启动服务,控制台打印


image.png

然后我们改变home.js
会看到控制台发生了改名,指向了改变的模块,并且页面也没有刷新

image.png
上一篇 下一篇

猜你喜欢

热点阅读