前端_webpack简介及使用

一、webpack简介

webpack是前端资源构建工具+静态模块打包器。
前端资源构建工具：就是把一些浏览器不支持的文件比如less，sass，转换成浏览器支持的css这样的工具。
静态模块打包器：前端的所有资源文件(js/json/css/img/less/…)都会被webpack作为模块处理。它将根据模块的依赖关系进行静态分析，打包生成对应的静态资源(bundle)。

二、webpack五个核心概念

2.1 Entry

指定 webpack 打包的入口

2.2 Output

指定 webpack 打包资源的存放位置

2.3 Loader

让 webpack 能够处理非 JavaScript 文件 (webpack 自身只能处理JavaScript)

2.4 Plugins

可以用于执行范围更广的任务。插件的范围包括，从打包优化和压缩，一直到重新定义环境中的变量等。

2.5 mode

指定 webpack 当前的构建环境类型。设置mode可以自动触发webpack内置的函数，达到优化的效果。

development

会将 process.env.NODE_ENV 的值设为 development。启用 NamedChunksPlugin 和 NamedModulesPlugin。

development打包后，一些没有依赖的方法变量文件会保留，production则会移除。

production

会将 process.env.NODE_ENV 的值设为 production。启用 FlagDependencyUsagePlugin, FlagIncludedChunksPlugin, ModuleConcatenationPlugin, NoEmitOnErrorsPlugin, OccurrenceOrderPlugin, SideEffectsFlagPlugin 和 UglifyJsPlugin。

production打包后，代码会进行压缩，比development的文件小。

三、webpack体验

3.1 初始化项目

手动创建如下目录结构

目录说明：

dist ：用于保存打包后的文件，例如 bundle.js
src : 用于存放开发源代码文件
- css ：用于存放源代码css文件
- images：用于存放源图片文件
- js：用于存放源 js 文件
- index.html: 源html文件
- main.js ：入口js文件，所有需要引入的 js以及 css 都在这里编写。

创建完后，启用终端，进入项目根目录，执行命令 npm init -y

执行成功后，会生成一个package.json文件，面包含许多元信息，比如项目名称，项目版本，项目执行入口文件，项目贡献者等等。npm install 命令会根据这个文件下载所有依赖模块。

3.2 在全局和开发环境安装webpack模块及依赖

在终端输入下面命令全局安装webpack

npm install webpack webpack-cli -g

在终端输入下面命令在开发环境安装webpack

npm install webpack webpack-cli -D

注：在全局安装是为了在终端能运行webpack命令，实际开发中，为了防止全局安装出现的版本冲突，一般都把webpack安装到本地项目中

说明：npm是通过国外镜像获取资源，有时候下载不了资源，使用cnpm工具从国内镜像获取资源。

3.3 打包应用

3.3.1 在index.html编写 li 标签

<!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>
</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>
        <li>这是第10个li</li>
    </ul>
</body>
</html>

`3.3.2 在 main.js` 中通过import引入一个有li标签样式的js文件

main.js文件代码

/* 
  这是入口主文件，webpack会根据这个主文件找到项目中其他所有的依赖文件  
  需要在html中引入该文件
*/

// import *** from *** 是ES6中导入模块的方式
// 由于 ES6的代码，太高级了，浏览器解析不了，所以，这一行执行会报错
import "./js/li_style.js"

li_style.js文件代码

// 1. 导入 Jquery
import $ from 'jquery'

$(function(){
    $("li:odd").css("backgroundColor", "pink")
    $("li:even").css("backgroundColor", "yellow")
})

此时如果直接在index.html中引入src目录下的main.js，在浏览器打开index.html文件会报错，因为main.js中 import ** 为ES6的语法，太高级了，浏览器解析不了。

此时，就需要用到webpack，对应用进行编译，将高级语法转换为低级语法。

3.3.3 打包文件

# 开发环境。webpack会以 ./src/main.js 为入口文件开始打包，打包后输出到 ./dist/main.js  整体打包环境，是开发环境
webpack --entry ./src/main.js -o ./dist/ --mode=development

# 生产环境。webpack会以 ./src/main.js 为入口文件开始打包，打包后输出到 ./dist/main.js  整体打包环境，是生产环境
webpack --entry ./src/main.js -o ./dist/ --mode=production

在index.html文件中引用 ../dist/main.js ，在浏览器打开index.html文件效果如下

3.4 使用webpack配置文件打包应用

每次打包都需要在命令后添加一长串参数，这种操作方式就显得很繁琐，我们可将这些参数放到webpack的配置文件中简化我们的操作。

在根目录创建 webpack.config.js 文件，注意，文件名称不可修改。文件代码如下：

// 由于webpack 是基于Node 进行构建的，所以webpack的配置文件中，任何合法的Node代码都是支持的。但是不支持es6的导包方式
// 获取根目录的绝对路径
const path = require('path')

// 这里引入的webpack需要使用 npm install webpack -D 安装模块
const webpack = require("webpack")


// 这个配置文件，起始就是一个 JS 文件，通过 Node 中的模块操作，向外暴露了一个 配置对象
module.exports = {
    mode: "development",
    entry: './src/main.js',// 入口，表示，要使用 webpack 打包哪个文件
    output: { // 输出文件相关的配置
        path: path.resolve(__dirname, 'dist'), // 指定 打包好的文件，输出到哪个目录中去
        filename: 'bundle.js' // 这是指定 输出的文件的名称
    },
}

完成配置后，在终端命令行直接输入 webpack 就能直接进行打包了。

3.5 使用 webpack-dev-server 工具自动完成webpack打包

使用配置文件打包，虽然简化了打包过程，但是如果我们频繁的修改代码（比如：修改颜色），每次修改后都需要手动打包，这又显得很繁琐了，我们可以用 webpack-dev-server 工具自动打包。

使用命令 cnpm install webpack-dev-server -D 安装 webpack-dev-server 工具

在package.json文件中，参考下图，增加一行代码。

注意：webpack5默认只读取public目录下的资源，src目录下的资源就无法读取，所以需要使用 --static src 修改读取目录。static为webpack5变更字段，变更前为contentBase

完成配置后，在终端运行命令：npm run dev

成功运行命令后，访问 http://localhost:8080，就可以访问src目录下的资源了。

打开index.html后，会发现列表没有背景颜色且在报错，这是因为前面的引用地址“../dist/main.js”，在采用域名访问方式时无法被访问，原因是未暴露dist目录。

修改引用地址为： <script src="/bundle.js"></script> 就可以正常渲染li标签了

修改说明：

因为在自动打包重新定义打包后文件名称为/bundle.js ，所以引用文件名称不再是 main.js。
自动打包后会在内存中生成一份同名文件，使用 /文件名称 可直接访问

3.6 在webpack配置文件中添加webpack-dev-server工具参数

在package.json中添加的工具命令，使用了 --static参数，我们可以将其配置到 webpack.config.js文件中，具体添加位置见下图

devServer 常用配置说明：

    devServer: {    // webpack-dev-server配置参会
        open: true, // 启动后，在浏览器自动打开首页，为false则不自动打开。
        hot: true,  // 启用热更新，热重载
        port: 3000,     // 启动服务的端口号
        compress: true, // 开启服务gzip压缩
        // historyApiFallback: true,// 使用 History 路由模式时，若404错误，则被替代为 index.html
        static: { // 告诉服务器获取资源的目录
            directory: path.join(__dirname, 'src'),      // 添加src为资源获取目录，webpack5默认获取资源是public目录
            // publicPath: '/test',  // 设置内存中的打包文件的虚拟路径映射，设置后所有的uri都需要在之前拼接上 /test
        },
        // contentBase:path.resolve(__dirname,'asset')  //webpack5弃用，在static中被修改为 directory
        // publicPath:'/test',    // webpack5弃用,在static中定义
    },

使用 npm run dev启动项目后，浏览器会自动打开浏览器访问 http://localhost:3000/

3.7 插件配置

webpack插件有很多，这里以 html-webpack-plugin 插件为例演示如何在webpack中使用插件

html-webpack-plugin插件有两个作用

自动在内存中根据指定页面生成一个内存的页面
自动把打包好的 bundle.js 追加到页面中去

3.7.1 安装插件工具

使用命令：cnpm install html-webpack-plugin -D 安装插件

3.7.2 在webpack.config.js 添加插件配置

参考上图，在 webpack.config.js 中配置如下代码：

    plugins: [  // 配置插件的节点
        new htmlWebpackPlugin({     // 创建一个 在内存中 生成 HTML  页面的插件
            template: path.resolve(__dirname, './src/index.html'),     // 指定 模板页面，将来会根据指定的页面路径，在内存中保存对应的 页面
            filename: 'index.html'      // 指定生成的页面的名称
        })
    ],

重新启动项目，查看index.html源码，可以看到插件自动引用 bundle.js

3.8 加载器

webpack, 默认只能打包处理 JS 类型的文件，无法处理其它的非 JS 类型的文件。

比如，在 ./src/css 目录下新建 index.css文件，文件代码如下：

// 取消li标签的点
li {
    list-style: none;
}

然后在main.js文件中引用这个css文件

此时，启动项目就会提示如下错误

如果要处理非JS类型的文件，我们需要手动安装一些合适第三方 loader 加载器。比如，

处理 .css 文件需要安装 style-loader、css-loader
处理 .less 文件需安装 less、less-loader
处理 .scss 文件需安装 sass、node-sass、scss-loader
处理图片文件、字体文件需安装 url-loader、file-loader
处理一些ES6高级语法或 ES7语法

下面以处理css为例演示插件处理过程

3.8.1 安装需处理类型文件的加载器

3.8.2 在webpack.config.js 添加处理器配置

打开 webpack.config.js 这个配置文件，在里面，新增一个 module 配置节点，它是一个对象，在这个对象身上，有个 rules 属性，
这个 rules 属性是数组，这个数组中，配置所有第三方文件的匹配和处理规则。

参考上图，在 webpack.config.js 中配置如下代码：

    module: {   // 这个节点，用于配置 所有 第三方模块 加载器 
        rules: [    // 所有第三方模块的 匹配规则
            {test: /\.css$/, use: ['style-loader', 'css-loader']},    //  配置处理 .css 文件的第三方loader 规则, 需要安装 style-loader、css-loader
            // { test: /\.less$/, use: ['style-loader', 'css-loader', 'less-loader'] }, //配置处理 .less 文件的第三方 loader 规则，需安装 less、less-loader
            // { test: /\.scss$/, use: ['style-loader', 'css-loader', 'sass-loader'] }, // 配置处理 .scss 文件的 第三方 loader 规则，需安装 sass、node-sass、scss-loader
            // { test: /\.(jpg|png|gif|bmp|jpeg)$/, use: 'url-loader?limit=7631&name=[hash:8]-[name].[ext]' }, // 处理 图片路径的 loader
            // // limit 给定的值，是图片的大小，单位是 byte， 如果我们引用的 图片，大于或等于给定的 limit值，则不会被转为base64格式的字符串， 如果 图片小于给定的 limit 值，则会被转为 base64的字符串
            // { test: /\.(ttf|eot|svg|woff|woff2)$/, use: 'url-loader' }, // 处理 字体文件的 loader 
            // { test: /\.js$/, use: 'babel-loader', exclude: /node_modules/ }, // 配置 Babel 来转换高级的ES语法
        ]
    }

重新启动项目，查看界面，可以看到 index.css 中定义的样式已生效。

3.8.3 webpack 处理第三方文件类型的过程

发现处理的文件不是JS类型，就会去配置文件中，查找有没有对应的第三方 loader 规则；
如果能找到对应的规则，就会调用对应的 loader 处理这种文件类型；
在调用loader 的时候，是从后往前调用的，比如演示中是先调用 css-loader 再调用 style-loader；
当最后的一个 loader 调用完毕，会把处理的结果，直接交给 webpack 进行打包合并，最终输出到 bundle.js 中去

四、其它

4.1 关闭console中"DevTools 无法加载来源映射：无法加载" 的告警

现象如下：

解决方法

在webpack.config.js文件中添加

devtool: "inline-source-map",

五、webpack 结合 vue 的使用

https://www.cnblogs.com/testlearn/p/16692301.html

posted @ 2022-09-11 16:16 码上测阅读(1369) 评论(0) 收藏举报

刷新页面返回顶部

不自在

每天累卷一点点ヾ(≧O≦)〃

前端_webpack简介及使用

一、webpack简介

二、webpack五个核心概念

2.1 Entry

2.2 Output

2.3 Loader

2.4 Plugins

2.5 mode

development

production

三、webpack体验

3.1 初始化项目

3.2 在全局和开发环境安装webpack模块及依赖

3.3 打包应用

3.3.1 在index.html编写 li 标签

`3.3.2 在 main.js` 中通过import引入一个有li标签样式的js文件

3.3.3 打包文件

3.4 使用webpack配置文件打包应用

3.5 使用 webpack-dev-server 工具自动完成webpack打包

3.6 在webpack配置文件中添加webpack-dev-server工具参数

3.7 插件配置

3.7.1 安装插件工具

3.7.2 在webpack.config.js 添加插件配置

3.8 加载器

3.8.1 安装需处理类型文件的加载器

3.8.2 在webpack.config.js 添加处理器配置

3.8.3 webpack 处理第三方文件类型的过程

四、其它

4.1 关闭console中"DevTools 无法加载来源映射：无法加载" 的告警

五、webpack 结合 vue 的使用

公告

不自在

每天累卷一点点 ヾ(≧O≦)〃

前端_webpack简介及使用

一、webpack简介

二、webpack五个核心概念

2.1 Entry

2.2 Output

2.3 Loader

2.4 Plugins

2.5 mode

development

production

三、webpack体验

3.1 初始化项目

3.2 在全局和开发环境安装webpack模块及依赖

3.3 打包应用

3.3.1 在index.html编写 li 标签

3.3.2 在 main.js 中通过import引入一个有li标签样式的js文件

3.3.3 打包文件

3.4 使用webpack配置文件打包应用

3.5 使用 webpack-dev-server 工具自动完成webpack打包

3.6 在webpack配置文件中添加webpack-dev-server工具参数

3.7 插件配置

3.7.1 安装插件工具

3.7.2 在webpack.config.js 添加插件配置

3.8 加载器

3.8.1 安装需处理类型文件的加载器

3.8.2 在webpack.config.js 添加处理器配置

3.8.3 webpack 处理第三方文件类型的过程

四、其它

4.1 关闭console中"DevTools 无法加载来源映射：无法加载" 的告警

五、webpack 结合 vue 的使用

公告

每天累卷一点点ヾ(≧O≦)〃

`3.3.2 在 main.js` 中通过import引入一个有li标签样式的js文件