webpack 入门1 - 技术栈

一、准备工作

1.新建文件夹webpack-abc,进入

文件夹。

npm init -y

npm i webpack webpack-cli

webpack-dev-server

html-webpack-plugin

@babel/core

babel-loader

@babel/preset-env

@babel/preset-react -D

2.新建public目录-> index.html

3.执行一下

npx webpack

二、webpack优化时使用到的属性

noParse

module中的一个属性，作用：不去解析指定的库依赖，提高打包效率。

当 webpack去解析 jquery的时候，会去解析jquery这个库是否依赖其他的包。我们对于这类不会依赖其他包的库，我们在打包时没有必要去解析，提高打包效率。

npm i jquery -D

在 indexjs 中引入 import jquery from 'jquery';

javascript 复制代码

exports = {
  ...
  module: {
    // 不解析
    noParse: /jquery/,
    rules: [
      ...
    ]
  }
}

然后执行 npx webpack看看,打包的大小。

各插件使用

IgnorePlugin

作用：忽略指定的第三方包目录，打包时不要被打进去。如我们要使用moment这个依赖库支持多个国家语言。

npm i moment -D

在indexjs中引入

import moment from'moment';

// 引入中文

import 'moment/locale/zh-cn';

moment.locale('zh-cn');

let tt = moment().endOf('day').fromNow(

console.log(tt)

在webpack.configjs中添加

// 插件

plugins:[

// 打包忽略掉./ocale/目录内容

new webpack.IgnorePlugin({

resourceRegExp:/^\.\/locale$/,

contextRegExp: /moment$/,

}),

new HtmIWebpackPlugin({

template:'./public/index.html',//页面模版

})

dllPlugin

这是webpack内置插件，实现了拆分bundles，提升构建速度。

举例，我们打包一个React项目,把一些不常改动的依赖包，如:react, react-dom, axios,antd等单

独打包好，然后以动态链接的方式引入即可。第二次打包时，就会发现这些包已经打包好了不需要再打包，这样可以提升性能。

tree-shaking、scope-hosting

这是生产环境下webpack的两个内置优化。

tree-shaking：自动去除import引入但没有使用的代码。

scope-hosting：提升作用域。如、累加和的直接加载结果。

5.抽离公共代码

webpack.configjs 使用optimization的splitChunks属性

module.exports ={

optimization:{

splitChunks:{ //如果只有一个入口就不用分离了；只有多页才需要公共的代码抽离出来。

common:{

chunks: 'initial',// 刚开始就要抽离

minSize: 0, //大小大于0字节的时候要抽离出来

minChunks: 2, //重复 2次使用的时候要抽离出来

}

6.懒加载，这里就是按需加载。

场景：点击按钮时候，需要动态加载xxjs，并读取该文件导出的内容。

// 使用语法动态导入插件

@babel/plugin-syntax-dynamic-import

打包的时候就会打成xxjs文件,然后按需去动态加载

import('./xx.js').then(data =>{

console.log(data.default)

})

7.热更新

热更新是指对数据变化的局部进行更新，而不进行页面刷新。

使用内置插件

NamedModulePlugin，作用：打印热更新的模块路径

使用内置插件

HotModuleReplacementPlugin,作用：热更新插件

javascript 复制代码

let path = require('path')
let webpack = require('webpack')// 1.
let HtmlWebpackPlugin = require('html-webpack-plugin')
module.exports ={
devServer:{
port: 300,
open: true,
contentBase:'./dist',
hot: true, // 2.启用热更新
},
...
plugin:[
new webpack.NamedModulePlugin(),
//打印热更新的模块路径
new webpack.HotModuleReplacementPlugin(),// 3.热更新插件
new HtmlWebpackPlugin({
template:'./src/index.html',
filename:'index.html',
})
]
}

8.loader解析时，指定或者排除解析目录

exclude:不解析的目录,

include:解析的目录，两者写其一即可。

oneOf: 匹配到一个loader后面的就不继续匹配了。