webpack基本使用

最新推荐文章于 2024-05-19 11:09:24 发布

_Elevenq

最新推荐文章于 2024-05-19 11:09:24 发布

阅读量527

点赞数 1

文章标签： vue.js

本文链接：https://blog.csdn.net/weixin_43574724/article/details/124285902

版权

我们为什么要用webpack

模块化管理的思想
- 下载第三方包，就用了npm下载，那这样子会导致项目里的文件特别多，占用体积大
- 缺点：上传熟读慢、网站打开速度就慢
- 需要：有一种工具可以帮助我们做模块化管理时，能压缩体积，减少文件数量
- 工具原理：会自动分析你项目中用到了哪些代码，哪些文件，并只把需要用到的东西打包出来
把代码做压缩，也能减少项目体积，让访问速度变快
ES6的语法浏览器不一定都支持，需要有一个工具可以帮我们把高版本语法转成低版本语法，webpack就有这个功能

webpack介绍

是一个打包工具，会自动分析项目中的依赖，再把用到的东西打包出来
他是基于node的，他就是node的第三方包

webpack基本使用

准备一个项目文件夹，文件名字是英文的，并且不要起名叫webpack,不然会冲突
来到项目文件夹做初始化
```
npm init -y
```
下包
```
npm i webpack webpack-cli
```
准备代码文件
- 来到项目中，新建一个文件夹，叫src，然后在里面新建一个index.js
- 来里面随便写一些代码，建议写输出代码，以及写另外一个js文件，js文件里暴露一个求和函数
- 代码如下：
```
export const addFn = (a,b) => a + b
```
- 来到index.js做一个导入
使用webpack打包压缩到吗
- 来到项目根目录，找到package.json文件，找到里面的script一栏，加如下代码
```
    "build":"webpack"
```
- 在cmd输入命令
```
npm run build
```
  - npm run 就是执行package.json里的script命令，你写的是build，就代表执行build
  - build命令其实就是在调用webpack来打包

webpack - 修改代码后需重新打包

代码改动后，需要重新打包吗？

需要，不然打包后的文件不会有改动
正式上线，代码肯定必须经历打包的过程

webpack的入口和出口概念

如果我把src里的index.js名字改了，还可以打包吗？

入口：
- 指的是整个项目中的起始文件：也就是项目是从哪个文件开始
- webpack默认认定src/index.js是入口文件
出口：
- 指的是打包后的文件，默认的出口位置是：dist/main.js

webpack配置文件

我可以改掉默认的入口和出口吗？

来到项目的根目录，就是项目里跟package.json这个文件平级的位置，新建一个文件叫webpack.config.js

输入如下代码：

const path = require('path')
module.export = {
    //设置入口文件
    entry:'./src/xx.js',
    //设置出口文件
    output:{
        //设置打包后的文件夹
        path:path.join(__dirname,'chukou'),
        //设置打包后的文件名
        ilename:'nb.js'
    }
}

path.resolve和path.join区别

一般情况下没有区别，仅在使用根目录符号(/)时有区别
resolve拼接时，如果遇到/目录会把/解析成根目录，join不会

配置出口之自动清理出口文件夹

现在存在的问题是：我们每次如果重新打包，原来打包的文件夹里的文件都还在，没有删掉，需要自己手动删除，有没有一种自动删除的功能？

来到配置文件中，找到output，加一个clean，代码如下：
```
output:{
    clean:true
}
```

webpack - 打包流程

未命名绘图.png

webpack - 打包后的js文件用在网页中

打包后的js文件，能在html里导入并使用吗？

需求：写一段jQuery代码，用jQuery创造出li添加到页面

核心代码如下：

import $ from 'jquery'
//需求：创建li
//先创建ul，加到body
let $ul = $('<ul>').appendTo('body')
//使用循环创建10个li，加到ul里
for(et i = 0; i < 10; i++){
    $('<li>').text('我是li' + i).appendTo($ul)
}

目的：是为了明确上线都使用打包后的文件

webpack插件-html-webpack-plugin

html文件里每次都要手动导入，麻烦吗？
有没有能帮我们自动导入的功能？
甚至还能帮我们自动生成html的功能

使用步骤

下包

npm install --save-dev html-webpack-plugin

来到webpack.config.js导入插件并使用插件

const HtmlWebpackPlugin = require('html-webpack-plugin')
module.exports = {
    //使用插件
    plugins:[new HtmlWebpackPlugin()]
}

作用：他默认会自动生成一个空白的html文件，并帮你自动导入打包后的代码
如果你不需要自动生成的html文件，而是让他根据我们自己写的模板html来做导入打包后的js，就可以用一些自定义配置

他可以自定义一些配置，例如，使用一个html模板作为导入的文件

const HtmlWebpackPlugin = require('html-webpack-plugin')
const path = require('path')
module.exports = {
    output:{
    filename:'myli.js',
    clean:true
},
    //使用插件
    plugins:[
        new HtmlWebpackPlugin({
        //用public里面的index.html作为模板，去帮你生成打包后的html文件
        template:'./public/index.html',
        filename:'zzz.html'
    })]
}

webpack - 打包css文件

如果我们给刚刚的案例加个需求：去掉li前面的小点，用css文件写，怎么做？

webpack默认只认识js文件
它要想认识别的文件，必须要有对应的loader
如果想要打包css文件，就要有css文件对应的loader，就叫css-loader

使用步骤：

下包

npm install -save-dev css-loader style-loader

添加配置文件代码如下：

    module:{
        // 规则：是一个数组，代表可以有多个规则
        // 一个规则一个对象
        rules: [
            {
                //正则表达式：找到所有以 .css结尾的文件(不区分大小写)
                test:/\.css$/i,
                // 让这些文件使用以下loader来处理打包
                // 他这里的使用顺序是从右到左
                // 也就是说先用的是css-loader，再用style-loader
                // 先用css-loader是把css文件里的内容解析js字符串
                // 类似：const str = 'ul {list-style:none;}'
                // 再用style-loader吧这个字符串创建成style元素插入到dom中
                // 类似：const style = document.createElement('style')
                // style.innerHTML = str
                // document.head.appendChild(style)
                use:["style-loader","css-loader"]
            }
        ]
    }

webpack - 打包less文件

注意：官网的这个文档里的配置是错误的，因为它写的是webpack4的用法，我们现在用的是5，那么用我下面的配置即可

步骤：
- 下载loader和less
```
npm install less less-loader --save-dev
```
- 添加到配置文件注意：以下配置代码放在module的rules里
```
{
    //匹配所有以.less结尾的文件
    test:/\less$/i,
    use:[
        'style-loader',
        'css-loader',
        'less-loader'
    ]
}
```
- 先用less-loader把less代码转换成css代码，再用css-loader把css代码转换成js字符串，最后用style-loader把这些css插入到dom中

webpack - 打包图片

需求：以模块化的方式导入图片，并代码创建img标签显示出来

webpack5以后内置了对图片的支持，但是默认没开启，需要加一个配置文件即可

配置如下：（这个配置放在跟less-loader这些平级的位置）

{
    test:/\.(png|jpg|jpeg|webp|gif)$/i,
    // 用asset特点：图片超过8kb，就会用路径
    // 图片如果小于8kb，就会转成base64
    // 如果图片用base64后减少网络请求
}

特点：如果图片超过8kb，那么会用图片地址、如果没超过8kb会把图片转成base64用base64

base64的优点和缺点

计算机中任何文件都是二进制，而base64可以理解为是对二进制转换成字母+数字形式，所以base64本质上也就是一个二进制，可以表示一个文件
优点：
- 如果网页里的图片用的是base64，那么他相当于把图片刻在网页里，不需要给服务器额外发请求，可以减轻服务的负担
缺点：
- base64会增大原本文件的体积，大概增大20%-30%左右

webpack - 使用balel-loader做语法降级

把箭头函数降级为普通函数

webpack可以做语法降级，但实际上依赖的是babel这个插件，用babel才能实现语法的转换 -> 高版本转成低版本起到兼容的目的

使用步骤：

下包

npm install -D babel-loader @babel/preset-env

添加配置文件(跟css-loader那些平级)

{
    //找所有的 .js文件或者.mjs文件
    test:/\.m?js$/i,
    exclude:/(node_modules|bower_components)/,
    // 这些文件使用babel-loader来处理
    use:{
        loader:'babel-loader',
        options:{
            presets:['@babel/preset-env']
        }
    }
}

配置之mode介绍

设置打包的模式，有两个模式
- development：开发环境（不压缩）
- production:生产环境（压缩）

webpack - 开发服务器（devServer）

每次改完代码如果想看效果，都必须重新打包才能看到效果
每次打包会比较慢，这样的话就不利于开发
所以在想，有没有一个东西，让我们可以改完代码立刻看效果，不用重新打包
有:这就是webpack提供的开发服务器功能
原理：第一次启动时帮你临时打包一下，然后开启一个微型服务器来显示打包后的网页，然后你改动代码，它内部会自动比对只有哪一部分修改了，它就单独更新那一部分内容，而不用重新打包
使用步骤
- 下包
```
npm install --save-dev webpack-dev-serve
```
- 来到webpack.config.js里，写如下配置（跟entry这些平级）
```
devServe:{
    static:'./dist'
}
```
- 来到webpack.json找到script加一条执行的命令
```
"serve":"webpack serve --open"
```
  - 注意：如果是改了配置文件还是得重新运行
  - 注意：默认之后找出口文件的index.html，所以记得最好不要改生成的html文件名

devServe修改默认端口

改配置文件可以修改端口
```
devServe:{
    port:端口号
}
```

_Elevenq

关注

1
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
webpack基本使用

我们为什么要用webpack模块化管理的思想下载第三方包，就用了npm下载，那这样子会导致项目里的文件特别多，占用体积大缺点：上传熟读慢、网站打开速度就慢需要：有一种工具可以帮助我们做模块化管理时，能压缩体积，减少文件数量工具原理：会自动分析你项目中用到了哪些代码，哪些文件，并只把需要用到的东西打包出来把代码做压缩，也能减少项目体积，让访问速度变快ES6的语法浏览器不一定都支持，需要有一个工具可以帮我们把高版本语法转成低版本语法，webpack就有这个功能webpack介绍是一
复制链接

扫一扫