webpack 配置文件的使用| 学习笔记

简介: 快速学习 webpack 配置文件的使用

开发者学堂课程前端自动化构建工具 Webpackwebpack 配置文件的使用】学习笔记,与课程紧密联系,让用户快速学习知识。

课程地址:https://developer.aliyun.com/learning/course/587/detail/8211


webpack 配置文件的使用


目录:

一、webpack 处理的问题

二、修改路径

三、导入 Jquery

四、配置文件(手动写出来)

五、webpack 命令


一、webpack 处理的问题

1. webpack 能够处理 Js 文件的互相依赖关系;

2. webpack 能够处理ds的兼容问题,把高级的、浏览器不是别的语法,转为低级的,浏览器能正常识别的语法

//刚才运行的命令格式: webpack 要打包的文件的路径﹑打包好的输出文件的路径

webpack 要打包的文件的路径打包好的输出文件的路径。

 

二、修改路径

修改代码$ ( 'li :odd' ) .css ( 'backgroundcolor', 'red')

想把颜色修改需要做一下重新的打包

修改路径webpack .lsrc\main.js .ldist\bundle.js

这是 main.js 项目的JS入口文件

 

三、导入 Jquery

import***from***Es6中导入模块的方式

由于 ES6 的代码,太高级了,浏览器解析不了,所以,这一行执行会报错

import $from 'jquery'

// const $ = require ( 'jquery ')

$(function (){

$ ( 'li:odd' ).css ( 'backgroundcolor' , 'yellow' )

$ ( 'li:even' ).css ( 'backgroundcolor' , function (){

return '#' +'D97634'

const path = require ( 'path')

 

四、配置文件(手动写出来)

这个配置文件,起始就是一个 Js 文件,通过 Node 中的模块操作,向外暴露了一个配置对象

module.exports = {

已经学会了举一反四,在配置文件中,需要手动指定入口和出口

entry: path.join(__dirname'./szc/main.js'),//入口,表示,要使用webpack 打包哪个文件

output: {l/输出文件相关的配置

path: path.join(_dirname './dist')

//指定打包好的文件,输出到哪个目录中去filename : 'bundle.js'1/这是指定输出的文件的名称

 

五、webpack 命令

当在控制台,直接输入 webpack 命令执行的时候,webpack 做了以下几步:

1.首先,webpack 发现,并没有通过命令的形式,给它指定入口和出口

2. webpack 就会去项目的根目录中,查找一个叫做‘webpack . config.js`的配置文件

3.当找到配置文件后,webpack 会去解析执行这个配置文件,当解析执行完配置文件后,就得到了配置文件中,导出的配置对象

4.当 webpack 拿到配置对象后,就拿到了配置对象中,指定的入口和出口,然后进行打包构建。

相关文章
|
7月前
webpack成长指北第4章---webpack配置文件
webpack成长指北第4章---webpack配置文件
44 0
|
7月前
webpack.config.js配置文件报错:The ‘mode‘ option has not been set
webpack.config.js配置文件报错:The ‘mode‘ option has not been set
107 0
|
27天前
|
前端开发
在Webpack配置文件中,如何配置loader以处理其他类型的文件,如CSS或图片
在Webpack配置文件中,通过设置`module.rules`来配置loader处理不同类型的文件。例如,使用`css-loader`和`style-loader`处理CSS文件,使用`file-loader`或`url-loader`处理图片等资源文件。配置示例:在`rules`数组中添加对应规则,指定`test`匹配文件类型,`use`指定使用的loader。
|
2月前
|
JavaScript
webpack学习五:webpack的配置文件webpack.config.js分离,分离成开发环境配置文件和生产环境配置文件
这篇文章介绍了如何将webpack的配置文件分离成开发环境和生产环境的配置文件,以提高打包效率。
52 1
webpack学习五:webpack的配置文件webpack.config.js分离,分离成开发环境配置文件和生产环境配置文件
|
7月前
|
Web App开发 JSON 前端开发
Webpack【搭建Webpack环境、Webpack增加配置文件、Webpack中使用Loader、Webpack分离CSS文件 】(一)-全面详解(学习总结---从入门到深化)
Webpack【搭建Webpack环境、Webpack增加配置文件、Webpack中使用Loader、Webpack分离CSS文件 】(一)-全面详解(学习总结---从入门到深化)
252 0
|
7月前
|
JSON 前端开发 JavaScript
Webpack【搭建Webpack环境、Webpack增加配置文件、Webpack中使用Loader、Webpack分离CSS文件 】(一)-全面详解(学习总结---从入门到深化)(上)
Webpack【搭建Webpack环境、Webpack增加配置文件、Webpack中使用Loader、Webpack分离CSS文件 】(一)-全面详解(学习总结---从入门到深化)
96 0
|
7月前
|
存储 缓存 JavaScript
《Webpack5 核心原理与应用实践》学习笔记-> webpack的loader开发技巧
《Webpack5 核心原理与应用实践》学习笔记-> webpack的loader开发技巧
90 1
|
7月前
|
缓存 监控 JavaScript
《Webpack5 核心原理与应用实践》学习笔记-> webpack极致性能优化
《Webpack5 核心原理与应用实践》学习笔记-> webpack极致性能优化
87 1
|
7月前
|
存储 缓存 前端开发
《Webpack5 核心原理与应用实践》学习笔记-> webpack5持久化缓存
《Webpack5 核心原理与应用实践》学习笔记-> webpack5持久化缓存
274 1
|
7月前
|
前端开发 测试技术
《Webpack5 核心原理与应用实践》学习笔记-> webpack核心配置结构
《Webpack5 核心原理与应用实践》学习笔记-> webpack核心配置结构
133 1
下一篇
DataWorks