webpack4基础配置教程（一）-----开发环境

最新推荐文章于 2024-07-19 22:28:45 发布

神秘的帅哥

最新推荐文章于 2024-07-19 22:28:45 发布

阅读量128

点赞数

分类专栏： webpack 文章标签： webpack javascript 前端

本文链接：https://blog.csdn.net/qq_50680212/article/details/125366149

版权

webpack 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

webpack4基础配置教程（一）-----开发环境

在这里插入图片描述

1.初识WebPack

什么是WebPack？
- WebPack是一个现代 JavaScript 应用程序的模块打包工具
- WebPack会将前端的所有资源文件（js/json/css/img/less/…）都作为模块处理
- 它根据模块的依赖关系进行分析，生成对应的资源
五个核心概念：
1. 【入口(entry)】：入口起点(entry point)指示 webpack 应该使用哪个模块，来作为构建其内部依赖图的开始
2. 【出口/输出(output)】：output 属性告诉 webpack 在哪里输出文件，以及如何命名这些文件
3. 【loader】：loader 让 webpack 能够去处理那些非 JavaScript 文件（webpack 自身只理解 JavaScript和json）
4. 【插件(plugins)】：插件可以用于执行范围更广的任务。插件的范围包括，从打包优化和压缩，一直到重新定义环境中的变量。插件接口功能极其强大，可以用来处理各种各样的任务
5. 【模式(mode)】：通过选择开发模式：development 或生产模式：production 之中的一个，来设置 mode 参数
对loader的理解
- webpack本身只能处理js，json模块，如果要加载其它类型的文件（模块），就需要使用对应的loader
- 它本身是一个函数，接收原文件为参数，返回转换结果
- loader一般以xxx-loader的方式命名，xxx代表了这个loader要做的转换功能，比如css-loader
对plugins的理解
- 插件可以完成一些loader不能完成的功能
配置文件
- webpack.config.js：用于存储webpack配置信息

2.开启项目

初始化项目：
- 初始化一个npm项目并使用默认参数创建package.json文件
```
npm init -y
```

安装webpack

npm install webpack@4 webpack-cli@3  -g	//全局安装，作为指令使用
npm install webpack@4 webpack-cli@3  -D   //本地安装，作为本地依赖使用

3.处理js和json文件

创建js文件
- src/js/app.js
- src/js/module1.js
- src/js/module2.js
- src/js/module3.js
创建主页面
- src/index.html
运行指令
- 打包指令（开发）
```
webpack ./src/js/app.js -o ./build/js/app.js --mode=development
```
  - 功能：webpack能够打包js和json文件，并且能将es6模块化语法转换成浏览器能识别的语法
- 打包指令（生产）
```
webpack ./src/js/app.js -o ./build/js/app.js --mode=production
```
  - 功能：在开发配置功能上加一个压缩代码的功能
结论：
- webpack能够编译打包js和json文件
- 能将es6的模块化语法转换成浏览器能识别的语法
- 能压缩代码
缺点：
- 不能编译打包css、img等文件
- 不能将js的es6基本语法转换为es5以下语法
改善：使用webpack配置文件解决，自定义功能

4.webpack配置文件

目的：在项目根目录定义配置文件，通过自定义配置文件，还原以上功能
文件名称：webpack.config.js

文件内容：

/* 
	1.该文件是webpack的配置文件，所有webpack的任务、用到的loader、plugins都要配置在这里
	2.该文件要符合CJS模块化规范
 */

//引入Node中一个内置的path模块，专门用于解决路径的问题
const path = require('path');

//使用CJS的模块化规范，暴露一个对象，该对象就是webpack的详细配置对象（规则）
module.exports = {
  mode: 'development',//工作模式
  entry: './src/js/app.js',//入口(精简写法)
  /* 
	//完整写法
	entry:{
		main:'./src/js/app.js'
	} 
  */
  output: { //出口（入口）
    path: path.resolve(__dirname, 'buile/js'), //输出文件的路径
    filename: 'app.js' //输出文件的名字
  }
};

运行指令：webpack

5.打包less、css资源

概述：less、css文件webpack不能解析，需要借助loader编译解析
创建less、css文件
- src/css/index.css
- src/css/demo.less
入口app.js文件
- 引入less、css资源

安装loader

npm install css-loader@3.6.0 style-loader@1.2.1 less@3.11.1 less-loader@6.1.0

配置loader

//module.rules中配置一个一个的loader
	module: {
		rules: [
			//配置解析css
			{
				test: /\.css$/,//该loader要处理的文件
				use: [
					'style-loader', //创建style标签，将样式资源插入，添加到head中生效
					'css-loader' //将css文件变成commonjs模块加载到js中，里面的内容是样式字符串
				]
			},
			//配置解析less
			{
				test: /\.less$/,//该loader要处理的文件
				use: [
					'style-loader', //创建style标签，将样式资源插入，添加到head中生效
					'css-loader', //将css文件变成commonjs模块加载到js中，里面的内容是样式字符串
					'less-loader' //将less文件编译成css文件
				]
			}
		]
	}

loader就是帮助Webpack来处理各种类型文件的，其执行顺序是从后向前

运行指令：webpack

6.打包html文件

概述：借助html-webpack-plugin插件打包html资源
创建html文件
- src/index.html
- 注意：不要在该文件引入任何css和js文件
安装插件：html-webpack-plugin
- ```
npm i --save-dev html-webpack-plugin@4
```

在webpack.config.js中引入插件（插件都需要手动引入，而loader会自动加载）

//引入html-webpack-plugin，用于加工html文件
const HtmlWebpackPlugin = require('html-webpack-plugin');

配置插件plugins

//plugins中专门用于配置插件，插件必须经过实例化这一环节
plugins: [
    //实例化HtmlWebpackPlugin
    new HtmlWebpackPlugin({
        //以当前文件为模板创建新的html（1.结构和原来一样 2.会自动引入打包的资源）
        template:'./src/index.html',
    })
]

运行指令：webpack

7.打包样式中的图片

概述：图片文件webpack不能解析，需要借助loader编译解析
添加两张图片：
- 小图，小于8kb：src/imgs/vue.png
- 大图，大于8kb：src/imgs/react.png

在less文件中通过背景图片的方式引入两个图片

#vue{
	width: 12.5rem;
	height: 12.5rem;
	background-size: 100%;
	background-image: url(../imgs/vue.png);
}
#react{
	width: 12.5rem;
	height: 12.5rem;
	background-size: 100%;
	background-image: url(../imgs/react.png);
}

安装loader
- ```
npm install file-loader@6.0.0  
npm install url-loader --save-dev
```
- 补充:url-loader是对象file-loader的上层封装，使用时需配合file-loader使用

配置loader

//配置解析样式中的图片
{
    test: /\.(png|jpg|gif)$/,
        use: [
            {
                loader: 'url-loader',
                options: {
                    outputPath:'imgs',//配置图片加工后存放的位置
                    // publicPath:'/build/imgs' //配置图片引入时前缀路径
                    name:'[hash:5].[ext]',//配置生成图片的名字+后缀
                    limit:8 * 1024, //图片大小，小于8kb时，将图片转换成base64编码
                }
            }
        ]
}

8.打包html中的图片

概述：html中的标签url-loader没法处理，需要引入其他loader处理
添加图片
- 在src/index.html添加2个img标签
安装loader
- ```
npm install --save-dev html-loader@0
```

配置loader

//处理html中的img资源
{
    test: /\.(html)$/,
        use:[
            'html-loader'
        ]
}

可能出现的问题：打包后html文件中的图片的src变成了：[object Module]
解决办法：url-loader中加入一个配置:esModule:false即可

9.打包其他资源

概述：其他资源（字体、音视频等）webpack不能解析，需要借助loader编译解析
以处理几个字体图标为例，在阿里图标库下载一些图标代码，将字体样式文件放入src/font文件夹
修改html，添加字体图标

配置loader

//处理其他资源（字体、音视频等等）
{
    exclude:/\.(html|js|css|less|jpg|png|gif|json)$/,//排除的文件
        use: [{
            loader:'file-loader',
            options:{
                name:'[hash:10].[ext]',//命名
                outputPath:'media'//输出路径
            }
        }]
}

10.devServer

安装webpack-dev-server
- ```
npm i -D webpack-dev-server@3.11.0
```

修改webpack配置对象，追加devServer配置（注意不是loader中追加）

//devServer配置（开发模式所持有的配置）
devServer:{
    port:'8080',//开启服务器的端口号
    open:true,// 自动打开浏览器
    hot:true //热更新
}

修改package.json中的scripts指令
- ```
"server": "webpack-dev-server"
```
运行指令：
```
npm run server
```

本套配置只适合用于开发过程中调试代码，项目上线并不能运用这套配置，因为还有很多问题没有解决，比如：css还不是单独的文件，css、js还有很多兼容性问题等等，接下来我们开始搭建生存环境

神秘的帅哥

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
webpack4基础配置教程（一）-----开发环境

什么是WebPack？ - WebPack是一个现代 JavaScript 应用程序的模块打包工具 - WebPack会将前端的所有资源文件（js/json/css/img/less/....）都作为模块处理 - 它根据模块的依赖关系进行分析，生成对应的资源...
复制链接

扫一扫