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优化时使用到的属性

  1. noParse

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

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

npm i jquery -D

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

javascript 复制代码
exports = {
  ...
  module: {
    // 不解析
    noParse: /jquery/,
    rules: [
      ...
    ]
  }
}

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

各插件使用

  1. 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',//页面模版

})

],

  1. dllPlugin

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

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

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

  1. 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后面的就不继续匹配了。

相关推荐
zwjapple4 小时前
docker-compose一键部署全栈项目。springboot后端,react前端
前端·spring boot·docker
像风一样自由20206 小时前
HTML与JavaScript:构建动态交互式Web页面的基石
前端·javascript·html
aiprtem7 小时前
基于Flutter的web登录设计
前端·flutter
浪裡遊7 小时前
React Hooks全面解析:从基础到高级的实用指南
开发语言·前端·javascript·react.js·node.js·ecmascript·php
why技术7 小时前
Stack Overflow,轰然倒下!
前端·人工智能·后端
GISer_Jing7 小时前
0704-0706上海,又聚上了
前端·新浪微博
止观止8 小时前
深入探索 pnpm:高效磁盘利用与灵活的包管理解决方案
前端·pnpm·前端工程化·包管理器
whale fall8 小时前
npm install安装的node_modules是什么
前端·npm·node.js
烛阴8 小时前
简单入门Python装饰器
前端·python
袁煦丞9 小时前
数据库设计神器DrawDB:cpolar内网穿透实验室第595个成功挑战
前端·程序员·远程工作