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 拿到配置对象后,就拿到了配置对象中,指定的入口和出口,然后进行打包构建。

相关文章
|
22天前
|
Web App开发 JSON 前端开发
Webpack【搭建Webpack环境、Webpack增加配置文件、Webpack中使用Loader、Webpack分离CSS文件 】(一)-全面详解(学习总结---从入门到深化)
Webpack【搭建Webpack环境、Webpack增加配置文件、Webpack中使用Loader、Webpack分离CSS文件 】(一)-全面详解(学习总结---从入门到深化)
34 0
|
1月前
|
JSON 前端开发 JavaScript
Webpack【搭建Webpack环境、Webpack增加配置文件、Webpack中使用Loader、Webpack分离CSS文件 】(一)-全面详解(学习总结---从入门到深化)(上)
Webpack【搭建Webpack环境、Webpack增加配置文件、Webpack中使用Loader、Webpack分离CSS文件 】(一)-全面详解(学习总结---从入门到深化)
44 0
|
1月前
|
Web App开发 前端开发 JavaScript
Webpack【搭建Webpack环境、Webpack增加配置文件、Webpack中使用Loader、Webpack分离CSS文件 】(一)-全面详解(学习总结---从入门到深化)(下)
Webpack【搭建Webpack环境、Webpack增加配置文件、Webpack中使用Loader、Webpack分离CSS文件 】(一)-全面详解(学习总结---从入门到深化)
20 0
|
1月前
|
编解码 资源调度 前端开发
Webpack+Babel手把手带你搭建开发环境(内附配置文件)
Webpack+Babel手把手带你搭建开发环境(内附配置文件)
15 0
|
2月前
|
缓存 前端开发 API
《Webpack5 核心原理与应用实践》学习笔记-> webpack插件开发基础
《Webpack5 核心原理与应用实践》学习笔记-> webpack插件开发基础
31 0
|
2月前
|
前端开发 JavaScript 测试技术
《Webpack5 核心原理与应用实践》学习笔记-> webpack的loader运行与调试
《Webpack5 核心原理与应用实践》学习笔记-> webpack的loader运行与调试
27 0
|
2月前
|
存储 缓存 JavaScript
《Webpack5 核心原理与应用实践》学习笔记-> webpack的loader开发技巧
《Webpack5 核心原理与应用实践》学习笔记-> webpack的loader开发技巧
35 1
|
2月前
|
缓存 监控 JavaScript
《Webpack5 核心原理与应用实践》学习笔记-> webpack极致性能优化
《Webpack5 核心原理与应用实践》学习笔记-> webpack极致性能优化
28 1
|
2月前
|
前端开发 JavaScript
《Webpack5 核心原理与应用实践》学习笔记-> webpack代码压缩
《Webpack5 核心原理与应用实践》学习笔记-> webpack代码压缩
29 0
|
2月前
|
监控 IDE 开发工具
《Webpack5 核心原理与应用实践》学习笔记-> webpack性能优化技巧
《Webpack5 核心原理与应用实践》学习笔记-> webpack性能优化技巧
41 0