前端工程化 webpack

webpack

webpack 是前端项目工程化的具体解决方案
主要功能：他提供了友好的前端模块化的支持，代码压缩，处理浏览器兼容性，性能优化等功能

npm init -y
npm install jquery -S

安装webpack

 npm install webpack webpack-cli -D

-S --save
-D --save-dev

通过npmjs.com查看安装时选择-S还是-D

index.js 配置基础语句以隔行变色为例

// es6导入语法
import $ from 'jquery'// 定义jquery入口函数
$(function(){$('li:odd').css('background-color','red')$('li:even').css('background-color','pink')
})

项目中配置webpack

1.创建webpack.config.js配置文件并初始化

module.exports = {// 代表webpack运行模式，可选值 development  productionmode:'development'
}

2.在package.json的stript节点，新增dev脚本

  "scripts": {"dev":"webpack"},

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

npm run dev

4.生成dest文件

5.修改index.html下 js引入路径

<!-- <script src="index.js"></script> -->
<script src="../dist/main.js"></script>

webpack可选值应用场景

module.exports = {// 代表webpack运行模式，可选值 development  productionmode:'production'
}

开发时使用development 因为追求的是打包的速度，而不是体积
反过来发布时使用production 因为上线需要的是体积小

webpack的默认约定

webpack4.x和5.x的版本中
- 默认打包入口文件 src --> index.js
- 默认输出文件 dist --> main.js

导入node文件模块

const path = require("path/posix");

    // entry:指定要处理哪个文件entry:path.join(__dirname,'./src/index.js'),output:{// 存放目录path:path.join(__dirname,'dist'),// 生成的文件名filename:'bundle.js'}

webpack插件

webpack-dev-server
自动打包和构建
html-webpack-plugin
webpack中的HTML插件,可以定制index.html页面内容

npm install webpack-cli -D

2.修改package.json

  "scripts": {"dev": "webpack serve"},

3.浏览器访问
http://localhost:8080/

webpack在根目录中写入了一个bundle.js文件
但这个文件是保存在内存中的，所以看不见
更改html引用路径

<script src="/bundle.js"></script>

html-webpack-plugin

npm install html-webpack-plugin -D

1、导入HTML插件，得到一个构造函数

const HtmlPlugin = require('html-webpack-plugin')

2、创建HTML插件的实例对象

const htmlPlugin = new HtmlPlugin({template:'./src/index.html', // 指定要复制哪个页面filename:'./index.html'//指定复制出来的文件名和存放路径});})

3、插件的数组，将来webpack在运行时，会加载并调用这些插件
在module.exports里添加

plugins:[htmlPlugin]

复制后的页面会自动添加上内存里的js

devServer节点

    devServer:{open:true,//是否自动打开浏览器port:80,//指定端口号host:'127.0.0.1',//指定主机地址}

const path = require('path');const HtmlPlugin = require('html-webpack-plugin'); //导入HTML插件const htmlPlugin = new HtmlPlugin({   //创建实例对象template:'./src/index.html', // 指定要复制哪个页面filename:'./index.html'//指定复制出来的文件名和存放路径});module.exports = {mode:'development',entry:path.join(__dirname,'./src/index.js'),output:{filename:'bundle.js'},plugins:[htmlPlugin],devServer:{open:true,//是否自动打开浏览器port:80,//指定端口号host:'127.0.0.1',//指定主机地址}
}

loader概述

webpack处理不了非.js后缀的模块
需要调用loader加载器才可以正常打包

loader加载器的作用给：协助webpack打包处理器特定的文件模块

css-loader 处理css
less-loader 处理.less
babel-loader 处理webpack无法处理的高级JS语法

现在在src文件下创建css文件下index.css
在index.js中导入样式

import './css/index.css'

打包处理css文件

1.安装依赖

npm i style-loader css-loader -D

2.在webpack.config.js 的module->rules数组中，添加loader

    module:{//所有第三方文件模块的匹配机制rules:[{test:/\.css$/,user:['style-loader','css-loader']}]}

test标识匹配的文件类型
user标识要调用的loader

user数组中指定的loader顺序是固定的
多个loader的调用顺序是从后往前调

打包处理less文件

1、运行安装命令

npm i less-loader less -D

2、在webpack.config.js 的module->rules数组中，添加loader

    module:{//所有第三方文件模块的匹配机制rules:[{test:/\.css$/,use:['style-loader','css-loader']},{test:/\.less$/,use:['style-loader','css-loader','less-loader']}]}

处理url路径相关的文件

npm i url-loader file-loader

index.html

    <!-- 需求把/src/images/bg.jpg设置给src属性 --><img src="" alt="" class="box">

index.js

// 导入图片，得到图片文件
// 导入图片，得到图片文件
import bg from './images/bg.jpg'
$('.box').attr('src',bg)

webpack.config.js

    module:{//所有第三方文件模块的匹配机制rules:[{test:/\.css$/,use:['style-loader','css-loader']},{test:/\.less$/,use:['style-loader','css-loader','less-loader']},{test:/.jpg|png|gif$/,use:['url-loader?limit-22229']}]}

limit用来指定图片的大小，单位是字节
只有≤limit大小的图片，才会被转为base64格式的图片

处理js文件的高级语法babel-loader

index.js

// 定义装饰器函数
function info(target){target.info = 'Person info'
}// 定义一个普通的类
@info
class Person{}console.log(Person.info)

1.安装babel-loader相关包

npm install -D babel-loader @babel/core @babel/preset-env @babel/plugin-proposal-decorators

2.在webpack.config.js添加规则

{test: /\.m?js$/,exclude: /(node_modules|bower_components)/, // 排除不需要打包的目录use: {loader: 'babel-loader',options: {presets: ['@babel/preset-env']}}
}

3.在根目录创建babel.config.js

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

注：babel插件文档
webpack安装babel-loader文档

打包发布

1.开发环境下，打包生成的文件存放在内存中
2.开发环境下，打包生成的文件不会进行代码压缩和性能化

配置webpack打包发布

在package.json在scripts节点下，新增build命令

"build":"webpack --mode production"

–mode是用来指定webpack的运行模式
production代表生产环境，会对代码进行代码压缩和性能优化

注意：–model指定的参数项会覆盖webpack.config.js中的model选项

优化图片和文件的存放目录

在webpack.config.js中output模块下指定js存放目录

    output:{filename:'js/bundle.js'}

在webpack.config.js中module模块rules下指图片存放目录

 {test:/.jpg|png|gif$/,use:{loader:'url-loader',options:{limit:22228,// 明确指定打包生成的图片文件存储到dist目录下的images文件夹outputPath:'image'}}

自动清理dist目录下的旧文件

1.安装clean-webpack-plugin

npm install clean-webpack-plugin -D

2.在webpack.config.js中按需导入插件，得到插件的构造函数之后，创建插件的实例对象

const { CleanWebpackPlugin } = require('clean-webpack-plugin');

3.把创建的cleanPlugin的插件实例对象，挂载到plugins节点上

plugins: [htmlPlugin,new CleanWebpackPlugin()]

4.webpack5.x之后，需要在output中配置path路径

output: {filename: 'js/bundle.js',path: path.resolve(process.cwd(), 'dist')
}

source Map

Source Map 就是一个信息文件，里面存储着位置信息。也就是说，Source Map文件中存储着压缩混淆后的代码所对应的位置

出错的时候，除错工具将直接显示原始代码，而不是转换后的代码

在开发调试的时候，建议将值设为eval-source-map

开发环境下，webpack默认启动了Source Map功能，当程序运行出错的时候，可以直接通过控制台提示错误行位置定位到具体的源代码，开发环境下添加以下代码，能保证报错代码与源代码行数保持一致

在webpack.config.js中添加

devtool:'eval-source-map'

在生产环境下，如果省略了devtool选项，则最终生成的未见不包含Source Map 这能防止源码泄露
在生产环境下，如果想定位报错的具体行数，而不暴露源代码，可以将devtool的值设置为nosources-source-map

实际开发中，我们不需要自己配置webpack
会使用CLI 一键生成带有webpack的项目
开箱即用，我们只需知道webpack的基本概念即可

总结

1.能够掌握webpack的基本使用
安装、webpack。config.js 修改打包入口
2.了解常用的plugin的基本使用
webpack-dev-server html-webpack-plugin
3.了解常用的loader的基本使用
loader的作用 loader的调用过程
4.能够说出Source Map的作用
精准定位到错误行并显示对应的源码
方便开发者调试源码中的错误

补充 webpack 路径别名

webpack.config.js添加与module同级模块resolve

    resolve: {   //路径起别名alias: {'@': path.resolve(__dirname, './src/'),},},

使用@表示 src目录