Webpack

红太狼 2021-09-30 01:58 314阅读 0赞

### 安装webpack ###

最好本地安装，每个项目需求不同对应webpack版本不一样，可能会打不开。  
用 npm install webpack webpack-cli --save-dev 安装在开发环境

### 配置解析 ###

1.  全局单个文件  
    webpack index.js
2.  local 打包单个文件  
    npx webpack index.js
3.  添加了webpack.config.js 在script标签定义了关键字和默认执行文件，执行后生成位置和路径  
    npm run bundle （script里配置的关键字）

#### loader ####

> webpack默认只识别js文件打包，其他文件格式就需要引入loader，在webpack.cnfig.js文件module配置reles,来打包对应格式的文件

1.  autoprefixier  
    
2.  postcss

#### Plugin ####

> 可以在webpack运行到某个时刻的时候帮你做一些事情

htmlWebpackPlugin 会在打包结束后，自动生成一个html文件，并把打包生成的js文件自动引入到html文件中

cleanWebpackPlugin 会先把dist文件删除，然后重新打包一份，以防止有之前打包不用的辣鸡文件

#### source-map ####

> 代码报错的时候映射到原来的代码，而不是打包后代码

mode : 'development',
    devtool: 'cheap-module-eval-source-map'  
    //定位到行-第三方module一起-映射错误，比较快，打印错也比较详细
    
    mode : 'production',
    devtool: 'cheap-module-source-map'

#### webpack Devserver ####

> 启动一个服务器方便调试代码和发送ajax请求

#### bable 转化ES6代码 ####

#### Tree Shaking ####

> 只支持ES module 引入 主要用于按需打包

1.  同步代码： 在webpack.config.js配置optimization  
    
2.  异步import代码，无需配置，自动分割

#### 打包分析 Preloding Prefetching ####

console界面 ctrl+shift+p 搜索 show coverage 点击录制，可以看到代码利用率，

#### miniCssExtractPlugin ####

转载于:https://www.cnblogs.com/TheLastDark/p/10800400.html

发表评论取消回复

表情：

评论列表（有 0 条评论，314人围观）

还没有评论，来说两句吧...

相关阅读

相关【Webpack】Webpack基础入门

目录 1. 模块化相关概念 1.1 模块化的概念 1.2 模块化规范

红太狼/ 2023年02月17日 11:13/ 0 赞/ 271 阅读

相关 webpack

我的webpack学习视频链接：[https://study.163.com/course/courseMain.htm?courseId=1209745810][https_

我会带着你远行/ 2022年12月29日 00:27/ 0 赞/ 4 阅读

相关 webpack

1. webpack 1. webpack 就是一个js程序的打包器，当 webpack 处理应用程序时，它会递归地构建一个依赖关系图

淩亂°似流年/ 2022年12月08日 14:10/ 0 赞/ 5 阅读

相关 webpack

转自：https://github.com/hawx1993/tech-blog/issues/3 背景在去年年末参与的一个项目中，项目技术栈使用react

女爷i/ 2022年05月30日 00:16/ 0 赞/ 29 阅读

相关 WebPack

现在的前端网页功能丰富，特别是SPA（single page web application 单页应用）技术流行后，JavaScript的复杂度增加和需要一大堆依赖包

痛定思痛。/ 2022年05月24日 23:56/ 0 赞/ 80 阅读

相关 webpack

create a new webpack.config.js configuration file `npx webpack-cli init` 转载于:https://ww

阳光穿透心脏的1/2处/ 2021年11月04日 12:20/ 0 赞/ 261 阅读

相关 Webpack

安装webpack 最好本地安装，每个项目需求不同对应webpack版本不一样，可能会打不开。用 npm install webpack webpack-cli -

红太狼/ 2021年09月30日 01:58/ 0 赞/ 315 阅读

相关 webpack

1 webpack是什么？ CommonJS和AMD是用于JavaScript模块管理的两大规范，前者定义的是模块的同步加载，主要用于NodeJS；而后者则是异步加载，通过r

爱被打了一巴掌/ 2021年09月29日 04:38/ 0 赞/ 268 阅读

相关 Webpack

Webpack 1、模块化 2、Webpack基本使用过程 3、Webpack.config.js和package.json 4、webpack中

r囧r小猫/ 2021年09月24日 15:46/ 0 赞/ 267 阅读

相关 webpack

依赖nodejs 创建一个demo目录 mkdir webpack-demo && cd webpack-demo npm init -y npm install -...

朱雀/ 2020年09月05日 15:52/ 0 赞/ 738 阅读