webpack基础笔记合集

webpack基础

1.前端工程化

实际的前端开发：

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

什么是前端工程化？

前端工程化：在企业级的前端项目开发中，把前端开发所需的工具，技术，流程，经验等进行规范化，标准化

前端工程化解决方案？

webpack(https://www.webpackjs.com/)

2.webpack的基础使用

1.什么是webpack

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

主要功能：它提供了友好的前端模块化开发支持，以及代码压缩混淆，处理浏览器端JavaScript的兼容性，性能优化等强大的功能

2.webpack中的默认约定

在webpack4.x和5.x的版本中，有如下的默认约定：

① 默认的打包入口文件为src ->index.js

② 默认的输出文件路径为dist->main.js

注意：可以在webpack.config.js中修改打包的默认约定

3.自定义打包的入口与出口

在webpack.config.js配置文件中，通过entry节点指定打包的入口，通过output节点指定打包的出口

代码案例：

const path = require('path')
// 使用Node.js中的导出语法，向外导出一个webpack的配置对象
module.exports = {
    // 代表webpack运行的模式，可选值有两个development和production
    // 结论：开发时候一定要哟个development,因为追求的是打包的速度，而不是体积
    // 反过来，发布上线的时候一定能要用production,因为上线追求的是体积，而不是打包速度

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

4.安装配置webpack-dev-server

安装webpack-dev-server之后一旦保存后可自动打包

安装命令：

npm install webpack-dev-server@3.11.2 -D

配置：

① 修改package.json->scripts中的dev命令如下：

"scripts":{
    "dev":"webpack serve",//script 节点下的脚本，可以通过npm run执行
}

② 再次运行 npm run dev命令，重新进行项目的打包

③ 在浏览器中访问http://localhost:8080地址，查看自动打包效果

注意：webpack-dev-server会启动一个实时打包的http服务器

5.安装配置html-webpack-plugin

① 安装命令：

npm install html-webpack-plugin -D

② 配置html-webpack-plugin

// 1.导入html-webpack-plugin 这个插件，得到插件的构造函数（构造函数首字母大写）
const HtmlPlugin = require('html-webpack-plugin')

// 2.new  构造函数，创建插件的实例对象
const htmlplugin = new HtmlPlugin({
    //指定要复制哪个页面
    template:'./src/index.html',
    //指定复制出来的文件名和存放路径
    filename:'./index.html'
})

//3.插件数组，将来webpack在运行时，会加载并调用这些插件
module.exports = {
    mode:'development',
    ...
    plugins:[htmlplugin]
}

注意：① 通过HTML插件复制到项目根目录中的index.hmtl页面，也被放到了内存中

​ ② HTML插件在生成index.html页面，自动注入了打包的bundle.js文件

5.devServer节点

在webpack.config.js配置文件中，可以通过devServer节点对webpack-dev-server插件进行更多的配置

示例代码：

devServer:{
    open:true,//初次打包完成后，自动打开浏览器
    host:'127.0.0.1',//实时打包所使用的主机地址
    port:80,//实时打包所使用的端口号，在http协议中，如果端口号是80,则可以被省略
}

注意：凡是修改了webpack.config.js配置文件，或修改了package.json配置文件，必须重启实时打包的服务器，否则最新的配置文件无法生效

3.webpack中的loader

1.loader概述

在实际开发过程中，webpack默认只能打包处理以.js后缀名结尾的模块。其他非.js后缀名结尾的模块，webpack默认处理不了。需要调用loader加载器才可以正常打包，否则会报错

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

css-loader可以打包处理.css相关的文件

less-loader可以打包处理.less相关的文件

babel-loader可以打包处理webpack无法处理的高级JS语法

2.打包处理css文件

① 运行npm install --save-dev css-loader style-loader命令，安装处理css文件的loader

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

代码如下：

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

其中，test表示匹配的文件类型，use表示对应要调用的loader

注意：

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

3.打包处理less文件

① 运行npm install less less-loader --save-dev命令

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

代码如下：

module:{ //所有第三方我呢见模块的匹配规则
    rules:[ //文件后缀名的匹配规则
        {test:/\.less$/,use{'style-loader','css-loader','less-loader'}},
    ]
}

4.打包处理样式表中与url路径相关的文件

① 运行npm i url-loader file-loader -D 命令

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

代码如下：

module:{ //所有第三方文件模块的匹配规则
    rules:[ //文件后缀名的匹配规则
        { test:/\.jpg|png|gif$/,use:'url-loader?limit=22229'},
    ]
}

其中?之后是loader的参数项：

limit用来之地那个图片的大小，单位是子节(byte)

只有<=limit大小的图片，才会被转为base64格式的图片

5.webpack打包处理js文件中的高级语法

webpack只能打包处理一部分高级的Javascript语法。对于那些webpack无法处理的高级js语法，需要借助于babel-loader进行打包处理

代码如下：

//1.定义了名为info的装饰器
function info(target) {
    //2.为目标添加静态属性 info
    target.info = 'Person info'
}

//3.为Parson类应用info装饰器
@info
class Person{}

//4.打印Person的静态属性info
console.log(Person.info)

6.安装babel-loader相关的包

运行如下的命令安装：

npm i babel-loader @babel/core @babel/plugin-proposal-decorators  -D

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

代码如下：

//注意：必须使用exclude指定排除项,因为node_modules目录下的第三方包不需要被打包
{ test:/\.js$/,use:'babel-loader',exclude:/node_modules/ }

7.配置babel-loader

在项目根目录下，创建名为babel.config.js的配置文件，定义Babel的配置如下：

module.exports = {
    //声明babel可用的插件
    plugins:[['@babel/plugin-proposal-decorators',{legacy:true}]]
}

4.webpack打包发布

1.配置webpack的打包发布

在package.json文件中的scripts节点下，新增build命令

代码如下：

"scripts":{
    "dev":"webpack serve",//开发环境中，运行dev命令
    "bulid":"webpack --mode production" //项目发布时，运行bulid命令
}

--mode是一个参数项，用来指定webpack的运行模式，production代表生产环境，会对打包生成的文件进行代码压缩和性能优化

注意：通过--mode指定的参数项，会覆盖webpack.config.js中的mode选项

2.把JavaScript文件统一生成到js目录中

在webpack.config.js配置文件的output节点中，进行如下配置：

output:{
    path:path.join(__dirname,'dist'),
    //明确告诉webpack把生成的bundle.js文件存放到dist目录下的js子目录中
        filename:'js/bundle.js'
}

3.把图片文件统一生成到image目录下

修改webpack.config.js中的url-loader配置项，新增outputPath选项即可指定图片文件的输出路径：

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

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

为了每次打包发布时自动清理掉dist目录中的旧文件，可以按照并配置clean-webpack-plugin插件：

//1.安装清理dist目录的webpack插件
npm install clean-webpack-plugin -D

//2.按需导入插件的构造函数之后，创建插件的实例对象
const { CleanWebpackPlugin } = require('clean-webpack-plugin')
const cleanPlugin = new CleanWebpackPlugin()

//3.把创建的cleanPlugin插件实例对象，挂载到plugins节点中
plugins:[htmlPlugin,cleanPlugin],//挂载插件

5.Source Map

1.什么是SourceMap

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

有了它，出错的时候，除错工具将直接显示原始代码，而不是转换后的代码，能够极大的方便后期的调试

2.默认Source Map的问题

开发环境下默认生成的Source Map,记录的是生成后的代码位置。会导致运行时报错的行数与源代码的行数不一致的问题。如图所示：

3.解决默认Source Map的问题

开发环境下，推荐在webpack.config.js中添加如下的配置，即可使运行时报错的行数与源代码的行数一致

代码如下：

module.exports = {
    mode:'development',
    //eval-source-map 仅限在”开发模式“下使用，不建议在生产模式下使用
    //此选项生成的Source Map能够保证运行时的报错行数与源代码的行数保持一致
    devtool:'eval-source-map',
		...
}

4.webpack生产环境下的Source Map

在生产环境下，如果省略了devtool选项，则最终生成的文件中不包含Source Map。这能够防止原始代码通过Source Map 的形式暴露出去。

5.只定位行数不暴露源码

在生产环境下，如果只想定位报错的具体行数，且不想暴露源码，可以将devtool的值设置为nosources-source-map

6.Source Map总结

① 开发环境下：

• 建议把devtool的值eval-source-map
• 好处：可以精准定位到具体的错误行

② 生产环境下：

• 建议关闭Source Map 或将devtool的值设置为nosources-source-map
• 好处：防止源码泄露，提高网站的安全性