webpack学习记录

发表于7 个月前|更新于7 个月前|默认

字数总计:2.3k|阅读时长:10分钟|阅读量:

什么是webpack？

webpack是前端工程化的具体解决方案，用于打包的，webpack分析项目结构,找到javascript模块以及其他的一些浏览器不能直接运行的拓展语言(如Scss，typescript等)，并将其打包为合适的格式以供浏览器使用

它提供了有好的前端模块化支持，以及代码压缩混淆、出力浏览器端javascript的兼容性、性能优化等强大的功能.

webpack基本使用

新建项目空白目录、并运行npm init -y，初始化包管理配置文件package.json
新建src源代码目录
新建src->index.html首页和src->index.js脚本文件
初始化首页基本的结构
运行npm install jquery -S 命令安装jquery
通过es6模块化的方式导入jquery，实现列表隔行变色效果

index.hml

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./index.js"></script>
</head>
<body>
    <ul>
        <li>这是第 1 个 li</li>
        <li>这是第 2 个 li</li>
        <li>这是第 3 个 li</li>
        <li>这是第 4 个 li</li>
        <li>这是第 5 个 li</li>
        <li>这是第 6 个 li</li>
        <li>这是第 7 个 li</li>
        <li>这是第 8 个 li</li>
        <li>这是第 9 个 li</li>
    </ul>
</body>
</html>

index.js

import $ from 'jquery'  //用 es6 默认语法导入 Jquery


// 定义 jquery 入口函数
$(function(){
    // 实现奇偶数行变色
    $('li:odd').css('background-color', 'red')
    $('li:even').css('background-color', 'pink')
})

思路: 使用webpack打包

安装webpack

npm install [email protected] [email protected] -D

-D –save-dev 简写参数解释: 将包记录到devDependencies里面，只在开发时候使用

在项目中配置webpack

在项目根目录中，创建名为webpack.config.js的webpack配置文件，并初始化如下的基本配置
```
module.exports={

mode: 'development'
}
```
在package.json的scripts节点下，新增dev脚本如下
```
"scripts": {
    "dev": "webpack" 
},
```

在终端运行

npm run dev

PS D:\codingprojects\vue\learn\webpack\example1> npm run dev

> [email protected] dev
> webpack

asset main.js 323 KiB [emitted] (name: main)
runtime modules 937 bytes 4 modules
cacheable modules 282 KiB
  ./src/index.js 244 bytes [built] [code generated]
  ./node_modules/jquery/dist/jquery.js 282 KiB [built] [code generated]
webpack 5.42.1 compiled successfully in 2111 ms

结果: 在根目录生成了dist目录包含main.js

在index.html中修改script的src为../dist/main.js

webpack继续探索

上面的例子是打包的main.js包含了注释大小为323KB

mode为production

将mode改为production再次打包

再次运行 npm run dev

运行结果

PS D:\codingprojects\vue\learn\webpack\example1> npm run dev

> [email protected] dev
> webpack

asset main.js 88.3 KiB [emitted] [minimized] (name: main) 1 related asset
runtime modules 663 bytes 3 modules
cacheable modules 282 KiB
  ./src/index.js 244 bytes [built] [code generated]
  ./node_modules/jquery/dist/jquery.js 282 KiB [built] [code generated]  
webpack 5.42.1 compiled successfully in 4687 ms

查看文件，注释没有了! 大小变成了282KB

缺点：打包时间长,production用于生产,开发时使用development，速度快

原理：在运行 npm run dev 时会去先读取根目录下的webpack.config.js

思考： 为何执行命令就可以把jquery.js和自己编写的index.js打包到dist/main.js中呢？

webpack 中的默认约定

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

默认的打包入口文件 src -> index.js
默认的输出文件路径为 dist -> main.js

但是可以在webpack.config.js可以修改默认配置

const path = require('path')

module.exports={

mode: 'production',
    entry: path.join(__dirname,'./src/index.js'), // 入口文件
    // 指定生成的文件放到哪里
    output: {
        path: path.join(__dirname,'./dist'), // 存放的文件夹
        filename: 'bundle.js' // 生成的文件名

}
}

当前问题： 每次修改了源文件都要执行打包命令，非常耗时

webpack-dev-server 插件热更新

问题解决： 安装插件 webpack-dev-server

npm install [email protected] -D
yarn add [email protected] -D

修改package.json中的scripts

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

执行 npm run dev 并访问 localhost:8080

此处注意版本问题： 如版本过高导致访问的时候出错

出现类似的错误

正确显示：

现在修改了能动态编译，但是修改了相关的元素访问依旧是无效

原因：因为是生成的bundle.js是存放在内存中，script中的src要引用内存当中的bundle.js

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

当前问题: 打开localhost:8080后还要点击src才能访问网页

需求： 一访问则直接进入

解决： 安装html-webpack-plugin

npm install [email protected] -D

配置插件：

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

const htmlPlugin = new HtmlPlugin(
    {
        template: './src/index.html',
        filename: './index.html'
    }
)
module.exports={

mode: 'development',
    entry: path.join(__dirname,'./src/index.js'), // 入口文件
    // 指定生成的文件放到哪里
    output: {
        path: path.join(__dirname,'./dist'), // 存放的文件夹
        filename: 'bundle.js' // 生成的文件名

},
    plugins:[htmlPlugin]
}

效果如图:

devServer 配置

devServer:{
    open: true ,// 运行后自动打开浏览器
    port: 8888, // 运行的端口号
    host: '127.0.0.1', // host地址
},

loader 配置

打包处理 CSS 文件

import $ from 'jquery'  // 用 es6 默认语法导入 Jquery
import './css/index.css' // 在 webpack 中，一切皆模块，都可以通过 ES6 导入语法进行导入

// 定义 jquery 入口函数
$(function(){
    // 实现奇偶数行变色
    $('li:odd').css('background-color', 'white')
    $('li:even').css('background-color', 'red')
})

module:{
    rules:[// 文件后缀名的匹配规则
        {test:/\.css$/,use:['style-loader','css-loader']}

]
}

webpack只能处理js结尾的文件，其他的文件无法处理，要借助相应的loader

处理css文件要安装对应的loader

npm i [email protected] [email protected] -D

当 webpack 发现某个文件处理不了的时候，会查找 webpack.config.js 这个配置文件，看 module.rules 数组中，是否配置了对应的 loader 加载器
当webpack 把index.css 这个文件，先转交给最后一个 loader 进行处理（先转交给 css-loader） css-loader再转交给上一个…

打包处理 less 文件

安装less的loader

npm install [email protected] [email protected] -D

配置rules

module:{
    rules:[// 文件后缀名的匹配规则
        {test:/\.css$/,use:['style-loader','css-loader']},
        {test:/\.less$/,use:['style-loader','css-loader','less-loader']},

]
}

处理图片文件

安装相应的loader

npm install [email protected] [email protected] -D

配置rules

module:{
    rules:[// 文件后缀名的匹配规则
        {test:/\.css$/,use:['style-loader','css-loader']},
        {test:/\.less$/,use:['style-loader','css-loader','less-loader']},
        {test:/\.png|jpg|gif$/,use:'url-loader?limit=888'}

]
}

**limit参数解释: ** 当文件大小小于limit(byte)时，图片会转成base64，以减小网络请求，当图片大小大于limit时则不会转成base64

处理js文件中的高级语法

webpack 只能打包处理一部分高级的 JavaScript 语法。对于那些 webpack 无法处理的高级 js 语法，需要借

助于 babel-loader 进行打包处理。例如以下的代码

function info(target){
    target.info = '测试'
}

@info
class Person{}

console.log(Person.info)

安装babel-loader

npm i [email protected] @babel/[email protected] @babel/[email protected] -D

配置rules

rules:[// 文件后缀名的匹配规则
    {test:/\.css$/,use:['style-loader','css-loader']},
    {test:/\.less$/,use:['style-loader','css-loader','less-loader']},
    {test:/\.png|jpg|gif$/,use:'url-loader'},
    {test:/\.js$/,use: 'babel-loader',exclude: /node_modules/}

]

另在项目根目录中创建名为 babel.config.js 的配置文件

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

}

配置webpack的打包发布

package.json中配置scripts

"scripts": {
  "dev": "webpack server",  
  "build": "webpack --mode production"
},

source Map

Source Map 就是一个信息文件，里面储存着位置信息。也就是说，Source Map 文件中存储着压缩混淆后的代码，所对应的转换前的位置。有了它，出错的时候，除错工具将直接显示原始代码，而不是转换后的代码，能够极大的方便后期的调试

配置： webpack.config.js文件中的modules添加devtool

调试时配置

module.exports={
    devtool: 'eval-source-map',
    devServer:{
        open: true ,// 运行后自动打开浏览器
        port: 8888, // 运行的端口号
        host: '127.0.0.1', // host地址
    },
    ....
}

在发布时配置:

module.exports={
    devtool: 'nosources-source-map',
    devServer:{
        open: true ,// 运行后自动打开浏览器
        port: 8888, // 运行的端口号
        host: '127.0.0.1', // host地址
    },
    ....
}

配置webpack.config.js

resolve: {
    alias: {
        // 告诉webpack @ 符号表示 ‘./src’
        '@': path.join(__dirname,'./src/')
    }
}

webpack学习记录

webpack学习记录

什么是webpack？

webpack基本使用

安装webpack

在项目中配置webpack

webpack继续探索

mode为production

webpack 中的默认约定

webpack-dev-server 插件热更新

devServer 配置

loader 配置

打包处理 CSS 文件

打包处理 less 文件

处理图片文件

处理js文件中的高级语法

安装babel-loader

配置rules

source Map

Recommend

青年大学习自助脚本

Did Google hold the Galaxy Watch 4 back to help the Pixel Watch?

Intercepting and Capturing MFA Logons

[论文]Crowd-Robot Interaction:Crowd-aware Robot Navigation with Attention-based...

[论文]Real-Time Visual-Inertial Mapping, Re-localization and Planning Onboard MA...

array_merge 和 array+ 的区别

六个鲜为人知的 Composer 命令

JVM内存管理------垃圾搜集器参数精解

你生产环境的 Composer 是这样吗？

宝塔Linux面板小内存服务器编译安装 MySQL 8.0

About Joyk

webpack学习记录

webpack学习记录

什么是webpack？

webpack基本使用

安装webpack

在项目中配置webpack

webpack继续探索

mode为production

webpack 中的默认约定

webpack-dev-server 插件 热更新

devServer 配置

loader 配置

打包处理 CSS 文件

打包处理 less 文件

处理图片文件

处理js文件中的高级语法

安装babel-loader

配置rules

source Map

Recommend

About Joyk

webpack-dev-server 插件热更新