webpack入门项目配置

你的名字 2022-11-24 14:19 179阅读 0赞

## 基本配置 ##

1.  拆分配置和merge

> 1.  分别创建webpack.common.js , webpack.dev.js , webpack.prod.js
> 
> --------------------
> 
> 1.  common.js 里,  
>     定义**entry**,  
>     **module**节点 rules里js的loader, css的loader, less的loader.  
>     **plugin**节点 Htmlwebpackplugin
> 
> --------------------
> 
> 1.  dev.js 里,  
>     定义**mode**节点为development,  
>     **module**节点 file-loader.  
>     **plugin**节点 webpack.DefinePlugin配置 window.ENV=‘development’,  
>     **devServer本地服务**节点
> 
> --------------------
> 
> 1.  prod.js 里,  
>     定义**mode**节点为production,  
>     **module**节点 rules里url-loader(base64情况)  
>     **plugin**节点 webpack.DefinePlugin配置 window.ENV=‘production’

安装webpack-merge, 引入smart

1.  启动本地服务

> 1.  安装webpack-dev-server
> 2.  在dev.js定义端口, 就是**devServer**节点配置项, 有port, progress(显示打包进度条), contentBase(根目录), open(自动打开浏览器), compress(启动gzip压缩). **proxy**节点配置代理搞定跨域, 比如现在前端接口是8080, 服务端接口是3000, 这样前端直接请求3000的话会产生跨域, 无法请求, 此时就需要配置proxy代理, 将本地 /xx/xx 代理到 localhost:3000/xx/xx

1.  处理ES6

> 1.  在common.js里rules节点配置babel-loader. 同时需要配置.babelrc文件

1.  处理样式

> 1.  在common.js里rules节点配置style-loader, css-loader, postcss-loader(注意loader执行顺序是从后往前)
> 2.  安装autoprefixer, 然后在postcss.config.js里配置

1.  处理图片

> 1.  在prod.js里rules节点配置url-loader, 小于5kb图片用base64方式产出. output节点配置filename: \[name\].\[contentHash:8\].js
> 2.  安装autoprefixer, 然后在postcss.config.js里配置

1.  模块化

--------------------

## 高级配置 ##

1.  多入口

> common.js 里,  
> 定义**entry**时建立两或多个入口,  
> prod.js里  
> **output**配置filename: \[name\].\[contentHash:8\].js  
> common.js里  
> 有几个入口就new几个HtmlWebpackPlugin, 其中chunk代表每个html文件要引入哪个js文件  
> prod.js中plugin里new CleanWebpackPlugin

1.  CSS

> 线上环境必须抽离, 压缩css  
> prod.js 安装mini-css-extract-plugin在loader中配置该loader代替dev环境下的style-loader, 在plguin中加抽离css文件的一个配置, new MiniCssExtractPlugin(\{ filename: ‘css/main.\[contentHash:8\].css’\}), 此时已抽离css, 然后需要压缩  
> 在与plugin平级的**optimization**配置minimizer使用**TerserJSPlugin**, **OptimizeCSSAssetsPlugin**, 然后就通过link外链引入, 提升性能

1.  抽离公共代码

> 三方模块和不会变得公共部分抽离  
> 在与plugin平级的**optimization**配置**splitChunks**

1.  懒加载

> import(‘路径’).then(res => \{\}\})  
> import函数返回一个promise,then加载资源

1.  处理JSX

> babel配置

1.  处理Vue

> common.js里module节点下rules里配置vue-loader

--------------------

## module chunk bundle的区别 ##

module - 各个源码文件, webpack中一切皆模块, 一切皆源码  
chunk - 多模块合并成的, 如 entry import() splitChunk  
bundle - 最终输出的文件

--------------------

## webpack性能优化 ##

## 1. 打包构建优化 ##

1.  优化babel-loader  
    `编译ES6语法, 发现没有改的启用缓存, 不用重复编译. 一般只在src下管`  
    ![babel优化][babel]
2.  happyPack  
    JS是单线程, 开启多进程打包, 提高构建速度  
    放common或prod.js里require happypack  
    ![加油][2020080619030090.JPG]
3.  ParalleIUglifyPlugin多进程压缩JS  
    webpack内置的Uglify工具是单线程压缩JS  
    和happypack同理.  
    ParalleIUglifyPlugin多进程压缩JS一般放在prod环境下, 因为开发环境没必要压缩js  
    ![多进程压缩JS][JS]
4.  关于开启多进程  
    项目大, 打包慢, 开启多进程能提高速度  
    项目小, 打包很快, 开启多进程反而会降低速度 (进程开销)
5.  自动刷新  
    `一般用不到` , 因为dev-server默认开启了  
    ![自动刷新][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzQ4NDQ2NTQy_size_16_color_FFFFFF_t_70]
6.  热更新(自动刷新升级版)  
    自动刷新: 整个网页全部刷新, 速度较慢, 状态会丢失, 比如在输入框输入东西还没提交, 或者路由嵌套多, 一刷新回到首页了. 这时可以选择热更新  
    `热更新`: 新代码生效, 网页不刷新, 状态, 路由等不丢失 在dev环境下配置
7.  DllPlguin动态链接库插件  
    前端框架如 vue React, 体积大, 构建慢, 较稳定, 不常升级版本  
    同一个版本只构建一次即可, 不用每次都重新构建  
    webpack已内置Dllplgin支持  
    DllPlugin - 打包出 dll 文件 , 最终产出dist下的react.dll.js和react.manifest.json(一个内容一个索引)  
    DllReferencePlugin - 使用 dll 文件(配置地址)
8.  可用于生产环境的  
    优化babel-loader
    
    > 1.  缓存. 可以只用于开发环境
    > 2.  明确范围.
    
    IgnorePlugin  
    noParse  
    happyPack  
    ParalleIUglifyPlugin 一般都用于生产环境
9.  不用于生产环境的  
    热更新肯定不用于生产环境  
    DllPlugin 只是为了开发环境上的速度优化

--------------------

## 2. 性能优化–产出 ##

1.  prod.js中url-loader的option, 小图片用base64, 这样小图片就不用网络请求, 节省耗时
2.  prod.js的output下filename: bundle加hash
3.  懒加载
4.  提取公共代码. 不用重复打包
5.  IgnorePlugin 可以减少代码, 比如多语言, 时间的库等
6.  使用CDN

> **方法**:
> 
> 1.  prod.js中output节点的publicPath: ‘http://cdn.xxx.’ // 修改所有静态文件 url 的前缀.
> 2.  把dist目录下的js和css文件上传到cdn服务器
> 3.  图片地址也可以使用cdn, url-loader下的publicPath: ‘http://cdn.xxx’

1.  使用production

> **为什么使用production?**
> 
> 1.  自动开启代码压缩
> 2.  Vue React等会自动删掉调试代码 (如开发环境的warning)
> 3.  启动 Tree-Shaking. 但是ES6 Module才能让tree-shaking生效, commonjs不行

> **补充**  
> **ES6 Module和Commonjs的区别**:
> 
> 1.  两者都是模块化解决方案, 前端常用ES6 Module, nodejs常用Commonjs, 但是前端也可以通过webpack配置实现Commonjs.
> 2.  **ES6 Module是静态引用, 编译时引用** import不能写在if判断里  
>     **Commonjs是动态引用, 执行时引用** require可以在if判断里写  
>     **只有静态引用, 才能实现Tree-shaking**  
>     ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzQ4NDQ2NTQy_size_16_color_FFFFFF_t_70 1]

1.  Scope Hosting  
    代码体积减小 , 多个函数合并  
    创建函数作用域更小  
    代码可读性更好

如何开启:  
![开启scope hosting][scope hosting]

--------------------

[babel]: /images/20221124/6c76f649b85f44b79f206af775f91bea.png
[2020080619030090.JPG]: /images/20221124/03e88b0e2fd548c8bcd591a62ee74555.png
[JS]: /images/20221124/1a8b0ef487754aa9924e718d449fa228.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzQ4NDQ2NTQy_size_16_color_FFFFFF_t_70]: /images/20221124/1c9ee003cd0d42c58eb6a94360277786.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzQ4NDQ2NTQy_size_16_color_FFFFFF_t_70 1]: /images/20221124/7902495282db459dbb23e9e0796e8cfb.png
[scope hosting]: /images/20221124/94a0f6cca23f4f888c01f04be219c6e7.png