webpack总结 | 青训营笔记这是我参与「第四届青训营」笔记创作活动的第24天，也是课程结束后的第二天，本篇将继续

这是我参与「第四届青训营」笔记创作活动的第24天，也是课程结束后的第二天，本篇将继续青训营期间学到的webpack知识。

理解前端工程化

模块化（js模块化、css模块化、资源模块化）
组件化（复用现有的UI结构、样式、行为）
规范化（目录结构划分、编码规范化、接口规范化、文档规范化、git分支管理）
自动化（自动化构建、自动部署、自动化测试）

了解webpack基本用法

webpack是前端项目工程化的具体解决方案

主要功能：友好的前端模块化开发支持、代码压缩混淆、处理浏览器端JS兼容性、性能优化

好处：程序员工作重心放到具体功能实现上，提高了前端开发效率和项目的可维护性

案例1prac：列表隔行变色项目

新建空白项目，并运行npm init -y, 初始化package.json
新建src源代码目录
src->index.html首页和src->index.js脚本文件

es6引入jquery： import $from 'jquery' //$ 导入jquery

$(()=>{
    $(li:odd).css('background-color', 'red');
})//奇数行设置背景颜色 li序号从0开始

高级语法引用会报错————webpack解决

项目中安装webpack

npm i webpack@5.42.1 webpack-cli@4.7.2 -D

-D ：-save-dev 在开发时候用到的

在项目中配置webpack

根目录中，创建名为webpack.config.js的webpack配置文件初始化基本配置

Module.exports = {
    mode: 'development'
    //mode 指构建模式，可选值：development开发者 和
}

package.json的scripts节点下，新增dev脚本

在终端运行npm run dev命令，启动webpack进行项目打包构建

了解mode可选值的应用场景

当看到有大量注释，就说明没有被压缩压缩：webapack.config.js里mode直接改成production

开发->development 打包快，速度快，体积大上线->production 体积小

指定webpack的entry和output（以下可用vue-cli操作，只做学习）

npm run dev 进入dev运行webpack->先根目录寻找webpack.config.js，找出mode配置选项，再生成相应文件
为什么webpack知道去src下寻找index.js： webapack4.x和webpack5.x，有如下默认约定默认打包入口文件src->index.js //src更改会报错默认输出文件dist->main.js
自定义打包入口出口 webpack.config.js配置文件中，通过entry节点指定打包入口，output节点指定打包出口
webpack生成的js文件是基于index.js的时候npm run dev，若更改js文件需要重新dev 解决：安装配置 webpack-dev-server 插件（与js里nodemon工具）

npm install webpack-dev-server@3.11.2 -D

配置webpack-dev-server：修改package.json -> script中的dev命令如下： "dev": "wenpack serve" 再次运行npm run dev，进行项目打包浏览器输入http://localhost:8080查看自动打包效果

结果： webapack-dev-server生成的文件夹不存在于物理磁盘（生成到内存，每次保存若频繁直接读写入磁盘，会降低磁盘寿命），实际效果更改更改不上去解决：加载引用内存里的main.js html头文件直接<script src="/main.js"></script>

http://localhost:8080进入是文件目录，而非直接进入展示页面

解决：安装 html-webpack-plugin: 将目录的html文件复制一份到内存，可直接查看

npm i html-webpack-plugin@5.3.2 -D

配置html-webapack-plugin webpack.config.js里：

//1. 导入HTML插件，得到一个构造函数
const HtmlPlugin = require('html-webpack-plugin');
//2. 创建HTML插件实例对象
const htmlPlugin = new HtmlPlugin({
    template: './src/index.html', //指定原文件存放路径
    filename: './index.html' //指定生成文件存放路径
})
//3. 通过plugins节点，使htmlPlugin插件生效
module.exports = {
    plugins :[htmlPlugin] 
}

html-webapack-plugin特性：通过HTML插件复制到项目根目录的index.html，并放到内存中， HTML插件生成的html文件自动注入脚本，内存中打包了的main.js

npm dev run后自动打开网页解决：通过webpack.config.js文件的devServer节点

devServer: {
    open: true, //true自动打开浏览器
    host: '127.0.0.1', //打包使用的主机地址
    port: 80 //端口号

},

webpack.config.js修改，或package.json修改，必须重启实时打包的服务器

webpack的loader（加载器）

webpack默认打包处理.js后缀名结尾的模块，其余需要调用loader加载器才可正常打包

loader加载器作用： css-loader：打包处理.css文件 less-loader：打包处理.less文件 babel-loader：打包处理webpack无法处理的高级JS语法

css

头部link添加css文件路径将不再生效

需要在index.js引入css

在webpack中，一切皆模块，都可用ES6导入语法进行导入和使用

打包处理css文件

运行npm i style-loader@3.0.0 css-loader@5.2.6 -D
在webpack.config.js的module里添加

module: {
    rules: [
        {test: /\.css$/, use:['style-loader', 'css-loader']}
    ]
}

use数组中指定loader顺序固定，多个loader调用顺序是从后往前调用 module: 所有第三方文件模块的匹配规则

webpack对于index.css先交给最后一个loader处理（css-loader） css-loader处理完毕后，处理结果转交下一个loader（style-loader）处理到没有loader后，处理结果转交webpack webpack将处理结果，合并到/dist/bundle.js中，最终生成打包好的文件

打包处理js中的高级语法

webpack无法处理高级js语言（比如装饰器）

安装babel-loader相关包 npm i babel-loader@8.2.2 @babel/core@7.14.6 @babel/plugin-proposal-decorators@7.14.5 -D
module的rules节点添加loader规则 {test: /\.js$/, use: 'babel-loader', exclude: /node_modules/} exclude指定排除项，node_modules目录下第三方包不用被打包
项目根目录下，创建babel.config.js配置文件：

module.exports = {
    plugins: [['@babel/plugin-proposal-decorators', {legacy:true}]]
}

打包发布

将文件打包交与后端上线发布，则需：将生成的内存文件放置磁盘

package.json的script节点下，新增build命令

"script" ： {
"build": "webpack --mode production",
}

--model是一个参数，用来指webpack的运行模式：production，进行代码压缩与性能优化

通过--module指定的参数选项（优先级更高），会覆盖webpack.config.js中的model选项

这样npm run dev 是开发者development打包运行 npm run build 是发布模式production打包运行: 生成dist文件

js文件放到js文件夹下

output的filename修改filename: 'js/main.js'

img生成到img文件夹

webpack.config.js的url-loader配置项，新增outputPath指定图片文件路径

{test: /\.jpg|png|gifs$/, use: 'url-loader?limit=22229&outputPath=img'}

每次打包发布先自动删掉dist文件夹

解决：

安装 clean-webpack-plugin 插件 npm i clean-webpack-plugin@3.0.0 -D
从包里导入一个构造函数 const {CleanWebpackPlugin} = require('clean-webpack-plugin');解构赋值
new 结果放到plugin里 plugins :[htmlPlugin, new CleanWebpackPlugin()],

Source Map

Source Map是一个信息文件，里面存储位置信息：Source Map文件存储着压缩混淆后的代码，所对应转换前的位置有了它，出错时，出错工具可直接显示原始代码，而不是转换后的代码

配置： webpack.config.js添加配置

devtool: 'eval-source-map',

项目发布时出于安全考虑最好关掉source map

只定位行数不暴露源码

devtool: 'nosources-source-map',