学习目标：
webpack
学习内容：
一、什么是webpack
- 概念：webpack是前端项目工程化的具体解决方案。
- 主要功能：它提供了有好的前端模块化开发支持，以及代码压缩混淆、处理浏览器端JavaScript的兼容性、性能优化等强大的功能。
- 好处：让程序员把工作的重心放到具体功能的实现上，提高了前端开发效率和项目的可维护性。
- 注意：目前Vue，React等前端项目，基本上都是基于webpack进行工程化开发的。
二、创建列表隔行变色项目
- 创建项目空白目录，并运行 npm init -y命令，初始化包管理配置文件package.json。
- 新建src源代码目录。
- 新建src ->index.html首页和src->index.js脚本文件。
- 初始化首页基本的结构
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="./index.js"></script>
</head>
<body>
<ul>
<Li>这是第一个</Li>
<Li>这是第二个</Li>
<Li>这是第三个</Li>
<Li>这是第四个</Li>
<Li>这是第五个</Li>
<Li>这是第六个</Li>
<Li>这是第七个</Li>
<Li>这是第八个</Li>
</ul>
</body>
</html>
- 运行命令安装jQuery
npm install jquery -S
- 通过ES6 模块化的方式导入jQuery，实现列表隔行变色效果
import $ from 'jquery'
$(function(){
$('li:odd').css('background-color', 'red')
$('li:even').css('background-color', 'green')
})
三、在项目中安装webpack
-
在终端运行如下的命令，安装webpack相关的两个包
npm install webpack@5.42.1 webpack-cli@4.7.2 -D -
package.json文件属性：
dependencies：项目在开发环境和生产环境下都需要的包
devDependencies：只在项目开发环境下需要的包 -
命令查询网站npmjs.com
-S是 --save的简写
-D是 --save-dev的简写
四、在项目中配置webpack
- 在项目根目录中，创建名为webpack.config.js的webpack配置文件，并初始化如下的基本配置：
mode代表webpack运行的模式，可选值有两个 development 和 productionmodule.exports = { mode:'development' } - 在package.json的scripts节点下，新增dev脚本如下：
在终端中运行npm run dev的命令，启动webpack进行项目的打包构建"scripts": { "dev": "webpack" } - 目录中新增dist文件夹
- mode属性值的对比： development:打包速度快，体积大； production：打包速度慢，体积小。
- webpack.config.js自定义打包的入口与出口：
默认打包的入口文件为src下的index.js，出口文件为dist下的main.js；
通过entry节点指定打包的入口。通过output节点指定打包出口。
示例：const path = require('path') module.exports = { // 代表webpack运行的模式，可选值有两个 development 和 production mode:'development', entry: path.join(__dirname,'./src/index.js'), output: { path: path.join(__dirname,'dist'), filename: "main.js" } } }
五、webpack插件的作用
-
通过安装和配置第三方的插件，可以拓展webpack的能力，从而让webpack用起来更方便。最常用的webpack插件有如下两个：
（1）webpack-dev-server：类似与node.js阶段用到的nodemon工具，没当修改了源代码，webpack会自动进行项目的打包和构建
（2）html-webpack-plugin：webpack中的HTML插件，类似与一个模板引擎插件，可以通过此插件自定制index.html页面的内容 -
安装webpack-dev-server插件：
npm install webpack-dev-server@3.11.2 -D -
配置webpack-dev-server，修改package.json-中scripts的dev命令如下：
"scripts": { "dev": "webpack serve" }（1）启动命令：npm run dev ，访问浏览器localhost:8080，这时生成的main.js是虚拟文件，不存在于磁盘上而是存在于内存中。
（2）在webpack.config.js配置文件中，通过devServer节点对webpack-dev-server插件进行更多的配置，示例代码如下devServer: { // 初次启动服务，自动打开浏览器 open: true, // 服务端口号 port: 9000, // 实时打包使用的主机地址 host: '127.0.0.1' },注意：凡是修改了webpack.config.js配置文件或修改了packahe.json文件，必须重启实时打包的服务器。
-
安装html-webpack-plugin：
npm install html-webpack-plugin@5.3.2 -D -
配置html-webpack-plugin
// 使用Node.js中的导出语法，向外导出一个webpack的配置对象 const path = require('path') // 1.导入HTML插件，得到一个构造函数 const HtmlWebpackPlugin = require('html-webpack-plugin') // 2.创建HTML插件的实例对象 const htmlPlugin = new HtmlWebpackPlugin({ // 指定要复制哪个页面 template: './src/index.html', // 指定复制出来的文件名和存放路径 filename: './index.html' }) module.exports = { // 代表webpack运行的模式，可选值有两个 development 和 production mode:'development', entry: path.join(__dirname,'./src/index.js'), output: { path: path.join(__dirname,'dist'), filename: "main.js" }, // 插件的数组，将来webpack在运行时，会加载并调用这些插件 plugins: [htmlPlugin] } -
html-webpack-plugin作用：通过HTML插件复制到项目根目录中的index.html页面，放入内存中；html插件在生成的index.html页面，自动注入了打包的main.js文件
六、webpack中的loader
-
loader概述
在实际开发过程中，webpack默认只能打包处理以.js后缀名结尾的模块。其他非.js后缀名结尾的模块，
webpack默认处理不了，需要调用loader加载器才可以正常打包，否则会报错！ -
loader加载器的作用：协助webpack打包处理特定的文件模块。比如：
（1）css-loader可以打包处理.css相关文件
（2）less-loader可以打包处理.less相关的文件
（3）babel-loader可以打包处理webpack无法处理的高级JS语法 -
安装配置css-loader：
（1）运行命令安装css文件的loader
npm i style-loader@3.0.0 css-loader@5.2.6 -D（2）在webpack.config.js的module->rules数组中，添加loader，规则如下：
module: { rules: [ {test: /\.css$/,use:['style-loader','css-loader']} ] }其中，test标识匹配的文件类型，use表示对应要调用的loader
注意：use数组中指定的loader顺序是固定的，多个loader的调用顺序是：从后往前调用 -
安装配置less-loader：
npm i less-loader@10.0.1 less@4.1.1 -D配置如下：
module: { rules: [ {test: /\.less$/,use:['style-loader','css-loader','less-loader']} ] } -
打包处理样式表中与url路径相关的文件
npm i url-loader@4.1.1 file-loader@6.2.0 -D配置如下：
module: { rules: [ { test: /\.jpg|png|gif$/,use: 'url-loader?limit=22229' } ] }其中?后是loader的参数项，limit是指定图片的大小，单位是字节(byte)，只有<=limit大小的图片才会被转为base64格式的图片
-
打包处理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: [ { test: /\.js$/,use: 'babel-loader', exclude: '/node_modules/'} ] }在项目根目录下，创建名为babel.config.js的文件，配置如下：
module.exports = { plugins: [['@babel/plugin-proposal-decorators',{ legacy: true}]] }
七、webpack打包发布
-
在package.json文件的scripts节点下，新增build命令如下：
scripts": { "dev": "webpack serve" ,"build": "webpack --mode production" }–model 是一个参数项，用来指定webpack的运行模式，会覆盖webpack.config.js的model选项
-
把js文件统一生成到js目录中，在webpack.config.js配置文件的output节点中，进行如下配置：
output: { path: path.join(__dirname,'dist'), filename: "js/main.js" } -
把图片文件统一生成到image目录中，修改webpack.config.js中的url-loader配置项，新增outputPath选项即可可指定图片文件的输出路径：
{test: /\.jpg|png|gif$/, use: 'url-loader?limit=400&outputPath=image'} -
自动清理dist目录下的旧文件，安装并配置clean-webpack-plugin插件：
(1)安装清理dist目录的webpack插件npm install clean-webpack-plugin@3.0.0 -D(2)在webpack.config.js文件中导入并创建插件的实例对象，挂载到plugins节点中
const { CleanWebpackPlugin } = require('clean-webpack-plugin'); const cleanWebpackPlugin = new CleanWebpackPlugin(); plugins: [htmlPlugin,cleanWebpackPlugin]
八、Source Map
-
Source Map就是一个信息文件，里面存储着位置信息。也就是说，Source
Map文件中存储着压缩混淆后的代码所对应的转换前的位置。出错的时候，可以直接显示原始代码，而不是转换后的代码，能够极大的方便后期的调试 -
开发环境下，默认是生成后的代码的位置，需要在webpack.config.js中moudle.exports中添加如下配置：
devtool: 'eval-source-map' -
生产环境下省略devtool选项，则最终生成的文件中不包含Source Map。这能够防止原始代码通过与Source Map的形式暴露。
-
设置devtool的值设置为nosources-source-map可以只显示报错行号而不暴露源码
九、其他配置
- @代表src目录：
在webpack.config.js文件中moudle.exports中添加配置如下resolve: { alias: { '@':path.join(__dirname, './src') } }
扫一扫
918
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
