webpack构建工具

最新推荐文章于 2024-06-15 10:25:41 发布

冲呀web

最新推荐文章于 2024-06-15 10:25:41 发布

阅读量402

点赞数

分类专栏： webpack打包文章标签： webpack

本文链接：https://blog.csdn.net/weixin_44698566/article/details/109426617

版权

webpack打包专栏收录该内容

2 篇文章 0 订阅

订阅专栏

一，简介

本质上，webpack 是一个现代 JavaScript 应用程序的静态模块打包器(module bundler)。当 webpack 处理应用程序时，它会递归地构建一个依赖关系图(dependency graph)，其中包含应用程序需要的每个模块，然后将所有这些模块打包成一个或多个 bundle（包）。
在这里插入图片描述

二，使用

2.1 通过npm安装webpack模块

//首先要安装全局的
cnpm install webpack webpack-cli -g
//快速创建一个package.json文件
cnpm init -y
//要在需要的项目中安装一个，添加到开发依赖中
z

2.2 简单的打包文件：
打包文件：文件名为index.js
在这里插入图片描述

目录结构：
在这里插入图片描述
在终端执行以下代码：

//1.开发环境下的打包(代码未压缩)
//   webpack ./src/index.js -o ./dist/bundle.js --mode=development


//2.生产环境下的打包(代码是压缩了的)
//  webpack ./src/index.js -o ./dist/bule.js --mode=production

打包好后的文件：
在这里插入图片描述

webpack默认可以处理js文件，和json文件；

2.3 使用webpack配置文件进行打包

目录结构：
在这里插入图片描述

创建一个webpack.config.js文件(放在项目的根目录)：

//由于 webpack 是基于Node进行构建的，所有webpack的配置文件中，任何合法的Node代码都是支持的
// 引入path模块
let path = require('path');
// 固定写法
module.exports = {
    //入口文件名称
    entry: "./src/index.js",
    output:{
    //输出文件名称
        filename: "bundle.js",
        //输出的路径,  __dirname表示当前文件的绝对路径
        path:path.join(__dirname,'dist')
    },
    // 开发模式
    mode : "development"
    
}

终端执行代码：webpack
在这里插入图片描述

2.4 webpack-dev-server的使用
为什么需要使用webpackwebpack-dev-server 这个工具？

由于每次重新修改代码之后，都需要手动运行webpack打包的命令，比较麻烦，所以使用webpack-dev-server来实现代码实时打包编译，当修改代码之后，会自动进行打包构建。
使用webpackwebpack-dev-server 这个工具

使用步骤：
1.运行cnpm i webpack-dev-server --save-dev安装到开发依赖
2.安装完成之后，在命令行直接运行webpack-dev-server来进行打包，发现报错，此时需要借助于package.json文件中的指令，来进行运行webpack-dev-server命令，在scripts节点下新增"dev": "webpack-dev-server"指令，发现可以进行实时打包，但是dist目录下并没有生成bundle.js文件，这是因为webpack-dev-server将打包好的文件放在了内存中
3.安装完成之后，在命令行直接运行webpack-dev-server来进行打包，发现报错，此时需要借助于package.json文件中的指令，来进行运行webpack-dev-server命令，在scripts节点下新增"dev": "webpack-dev-server"指令，npm run dev 发现可以进行实时打包，但是dist目录下并没有生成bundle.js文件，这是因为webpack-dev-server将打包好的文件放在了内存中

 "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "dev": "webpack-dev-server "
  },

把bundle.js放在内存中的好处是：由于需要实时打包编译，所以放在内存中速度会非常快
这个时候访问webpack-dev-server启动的http://localhost:8080/网站，发现是一个文件夹的面板，需要点击到src目录下，才能打开我们的index首页，此时引用不到bundle.js文件，需要修改index.html中script的src属性为:<script src="../bundle.js"></script>
为了能在访问http://localhost:8080/的时候直接访问到index首页，可以使用--contentBase src指令来修改dev指令，指定启动的根目录：

"dev": "webpack-dev-server --contentBase src"

同时修改index页面中script的src属性为<script src="bundle.js"></script>

webpack-dev-server 的常用命令：
方式一：

"scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "dev": "webpack-dev-server --open --port 3000 --hot"
  },

–open：自动打开浏览器窗口
–port 3000：设置服务器端口号
–contentBase src：以src为根目录查找下面的html文件
–hot：热更新，局部更新，页面无需重新刷新，不会重新打包生成文件

方式二：
第一步：
引入模块：
在这里插入图片描述

第二步：
在这里插入图片描述

第三步：
在这里插入图片描述

2.5loader

loader 让 webpack 能够去处理那些非 JavaScript 文件（webpack 自身只理解 JavaScript）。loader 可以将所有类型的文件转换为 webpack 能够处理的有效模块，然后你就可以利用 webpack 的打包能力，对它们进行处理。

1. 使用webpack打包css文件
在main.js文件中引入样式：
在这里插入图片描述

运行cnpm i style-loader css-loader --save-dev
修改webpack.config.js这个配置文件：

module: { // 用来配置第三方loader模块的
        rules: [ // 文件的匹配规则
            { test: /\.css$/, use: ['style-loader', 'css-loader'] }//处理css文件的规则，\表示转义
        ]
    }

注意：use表示使用哪些模块来处理test所匹配到的文件；use中相关loader模块的调用顺序是从后向前调用的，当最后loader调用完毕，会把处理结果直接打包合并，最终输出到bundle.js中去

2. 使用webpack打包less文件

运行cnpm i less-loader less -D
修改webpack.config.js这个配置文件：

{ test: /\.less$/, use: ['style-loader', 'css-loader', 'less-loader'] },

3. 使用webpack打包sass文件

运行cnpm i sass-loader node-sass --save-dev
在webpack.config.js中添加处理sass文件的loader模块：

{ test: /\.scss$/, use: ['style-loader', 'css-loader', 'sass-loader'] }

4. 使用webpack处理css中的路径

运行cnpm i url-loader file-loader --save-dev
在webpack.config.js中添加处理url路径的loader模块：

{ test: /\.(png|jpg|gif)$/, use: 'url-loader' }

{ test: /\.(jpg|png|gif|bmp|jpeg)$/, use: 'url-loader?limit=7631&name=[hash:8]-[name].[ext]' }, // 处理 图片路径的 loader
[hash:8]：每一张图片放一张8位hash值

可以通过limit指定进行base64编码的图片大小；只有小于指定字节（byte）的图片才会进行base64编码：

{ test: /\.(png|jpg|gif)$/, use: 'url-loader?limit=43960' },

处理字体文件

 { test: /\.(ttf|eot|svg|woff|woff2)$/, use: 'url-loader' }, // 处理 字体文件的 loader

本质上，webpack loader 将所有类型的文件，转换为应用程序的依赖图（和最终的 bundle）可以直接引用的模块。

目录结构：
在这里插入图片描述

创建一个webpack.config.js文件：

// 引入path模块
let path = require('path');
// 固定写法
module.exports = {
    //入口文件名称
    entry: "./src/index.js",
    output:{
        filename: "bundle.js",
        //输出的路径，绝对路径
        path:path.resolve(__dirname,'dist')
    },
    // 开发模式
    mode : "development",
    // 设置loader的配置
    module:{
        // 对某种格式的文件进行转换处理
        rules:[
            {
                // 正则匹配
                test:/\.css$/,
                use:[//use数组里的解析顺序是从下到上，逆序执行
                    // 将js的样式内容插入
                    "style-loader",
                    // 首先将css文件准换为js
                    "css-loader"
                ]
            }
        ]
    }
}

上面的方式我们需要在HTML通过script标签中引入一个打包好的文件，才能使用

2.4 plugin插件
可以自动通过script标签的src属性导入文件

运行cnpm i html-webpack-plugin --save-dev安装到开发依赖
修改webpack.config.js配置文件如下：
将index.html中script标签注释掉，因为html-webpack-plugin插件会自动把bundle.js注入到index.html页面中

// 引入path模块
let path = require('path');
//引入plugin插件,安装cnpm install html-webpack-plugin
let HtmlWebpackPlugin = require("html-webpack-plugin")
// 固定写法
module.exports = {
    //入口文件名称
    entry: "./src/index.js",
    output:{
        filename: "bundle.js",
        //输出的路径，绝对路径
        path:path.resolve(__dirname,'dist')
    },
    // 开发模式
    mode : "development",
    // 设置loader的配置
    module:{
        // 对某种格式的文件进行转换处理
        rules:[
            {
                // 正则匹配
                test:/\.css$/,
                use:[//use数组里的解析顺序是从下到上，逆序执行
                    // 将js的样式内容插入
                    "style-loader",
                    // 首先将css文件准换为js
                    "css-loader"
                ]
            }
        ]
    },
    // plugins插件配置
    plugins: [
        new HtmlWebpackPlugin({//创建的是一个内存中生成的HTML页面插件
            template:'./src/index.html',//指定模板页面，将会根据页面路径，去内存中生成页面
            filename: "index.html"//指定文件名称
        })
    ]
}

通过plugins标签自动导入的：
在这里插入图片描述
2.6 使用babel处理高级JS语法

运行cnpm i babel-core babel-loader babel-plugin-transform-runtime --save-dev安装babel的相关loader包
运行cnpm i babel-preset-es2015 babel-preset-stage-0 --save-dev安装babel转换的语法
在webpack.config.js中添加相关loader模块，其中需要注意的是，一定要把node_modules文件夹添加到排除项：

{ test: /\.js$/, use: 'babel-loader', exclude: /node_modules/ }

在项目根目录中添加.babelrc文件，并修改这个配置文件如下：

{
    "presets":["es2015", "stage-0"],
    "plugins":["transform-runtime"]
}

注意：语法插件babel-preset-es2015可以更新为babel-preset-env，它包含了所有的ES相关的语法；

// 在 webpack 中，默认只能处理 一部分 ES6 的新语法，一些更高级的ES6语法或者 ES7 语法，webpack 是处理不了的；这时候，就需要 借助于第三方的 loader，来帮助webpack 处理这些高级的语法，当第三方loader 把 高级语法转为 低级的语法之后，会把结果交给 webpack 去打包到 bundle.js 中
// 通过 Babel ，可以帮我们将 高级的语法转换为 低级的语法
// 1. 在 webpack 中，可以运行如下两套 命令，安装两套包，去安装 Babel 相关的loader功能：
// 1.1 第一套包： cnpm i babel-core babel-loader babel-plugin-transform-runtime -D
// 1.2 第二套包： cnpm i babel-preset-env babel-preset-stage-0 -D
// 2. 打开 webpack 的配置文件，在 module 节点下的 rules 数组中，添加一个 新的 匹配规则：
// 2.1 { test:/\.js$/, use: 'babel-loader', exclude:/node_modules/ }
// 2.2 注意： 在配置 babel 的 loader规则的时候，必须 把 node_modules 目录，通过 exclude 选项排除掉：原因有俩：
// 2.2.1 如果 不排除 node_modules， 则Babel 会把 node_modules 中所有的 第三方 JS 文件，都打包编译，这样，会非常消耗CPU，同时，打包速度非常慢；
// 2.2.2 哪怕，最终，Babel 把 所有 node_modules 中的JS转换完毕了，但是，项目也无法正常运行！
// 3. 在项目的 根目录中，新建一个 叫做 .babelrc  的Babel 配置文件，这个配置文件，属于JSON格式，所以，在写 .babelrc 配置的时候，必须符合JSON语法规范： 不能写注释，字符串必须用双引号
// 3.1 在 .babelrc 写如下的配置：  大家可以把 preset 翻译成 【语法】 的意思
        // {
        //   "presets": ["env", "stage-0"],
        //   "plugins": ["transform-runtime"]//babel的插件
        // }
// 4. 了解： 目前，我们安装的 babel-preset-env, 是比较新的ES语法， 之前， 我们安装的是 babel-preset-es2015, 现在，出了一个更新的 语法插件，叫做 babel-preset-env ，它包含了 所有的 和 es***相关的语法

演示：

{ test: /\.js$/, use: 'babel-loader', exclude: /node_modules/ }, // 配置 Babel 来转换高级的ES语法

在这里插入图片描述

冲呀web

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
webpack构建工具

一，简介本质上，webpack 是一个现代 JavaScript 应用程序的静态模块打包器(module bundler)。当 webpack 处理应用程序时，它会递归地构建一个依赖关系图(dependency graph)，其中包含应用程序需要的每个模块，然后将所有这些模块打包成一个或多个 bundle。二，使用2.1 通过npm安装webpack模块//首先要安装全局的cnpm install webpack webpack-cli -g//快速创建一个package.json文件cnp
复制链接

扫一扫