这是我参与8月更文挑战的第31天，活动详情查看：8月更文挑战
☆☆☆ 今天来学习实练-使用前端自动化工具: ( webpack ) ☆☆☆
可作为初学者的学习路线, 可参考一下, 学习进度也不是特别赶! 持续更新中
结合自己的理解, 用白话文简单又全面概括
JavaScript学习过程中的基础知识点, 方便加深理解!
开始今天的学习吧! '打牢地基才能筑高楼'! 加油! 认真对待!!
0. 梳理昨日知识:
( gulp ):
gulp将开发流程中让人痛苦或耗时的任务自动化，从而减少你所浪费的时间、创造更大价值。
1、安装环境: 先安装 node.js --- 安装 gulp
2、什么是 gulp --- 前端自动化工具
3、gulp 中的方法
task()/src()/dest()/pipe()/watch()
4、gulp 插件
gulp-sass/gulp-cssmin/gulp-uglify/gulp-concat/gulp-rename/gulp-imagemin
一. webpack
前端自动化-静态模块打包工具 webpack
概念: webpack 是一个用于现代 JavaScript 应用程序的 静态模块打包工具。
如封面图所示, 会将我们的 静态资源 统一打包成一个或多个 bundles,
1、useage 安装
1.1、全局安装
npm install -g webpack
# 或指定版本
npm install -g webpack@<version>
1.2、局部安装
创建项目目录 --- 进入目录 --- npm 初始化 package --- 安装 webpack
mkdir webpack-demo
cd webpack-demo
npm init -y
npm install webpack webpack-cli --save-dev # 进入项目下安装
如果使用 webpack 版本
webpack v4+, 则需要同时安装webpack-cli
2、配置 package.json 文件 将文件夹打包成 npm 包 npm init -y
安装该插件 ：
npm install html-webpack-plugin --save
3、配置 webpack.config.js文件
const path = require('path')
// 模块的暴露
module.exports = {
entry: './src/entry.js', //入口文件配置项
output: {
path: path.resolve(__dirname, 'dist'),
filename: 'bundle.js',
},
}
4、测试打包项目
目录结构 ：
通过 ： npm run webpack 如下配置则运行对应的命令 npm run dev
（在 package.json 中配置好 ）
Scripts:{ "dev":"webpack" }
5、插件 html-webpack-plugin 自动生成 index.html
安装该插件命令 ： # 将插件安装到 dependencies 下了
npm install html-webpack-plugin --save
修改配置文件 webpack.config.js，让插件生效
const HtmlWebpackPlugin = require("html-webpack-plugin"); // 引入插件
plugins : [
new HtmlWebpackPlugin() // 创建插件 应用对象
]
filename:"newIndex.html", // 输出新文件名
template:"dist/index.html" // 修改的 html 文件模板
6、实现打包多个相互依赖的 js 文件过程
通过 require()方法 在入口文件中引入
7、样式的打包 ： 通过安装 loader 加载器 可以将静态的样式文件一同打包到 bundle.js 文件中 通过下面命令安装加载器
在 entry.js 中导入样式 ：
require("!style-loader!css-loader!../css/style.css");
静态资源导入需要 加 !,必须先导入 style-load
8、实现自动监听项目配置文件 不需要每次手动运行 npm run dev
核心思想 ： 修改 package.json 文件
"build": "webpack --watch"
此时运行 npm run build 即可实现自动监听
9、npm 指令
Node Package Manager
node.js的一个包管理工具 ， 同 node.js一起安装的开发工具，方便 js 安装、上传、下载包管理工具
10、dependencies 和 devDependencies 区别
devDependencies开发模式所依赖的包dependencies线上模式所依赖的包管理
加油, 追梦人-_--
学习就是一个不断进行的过程, 坚持下去, 定有收获!
日积月累, 巩固基础, 早进大厂!
坚持很不容易, 坚持下来更不容易, 你真棒!
Calm Down & Carry On!
更多阅读:
前文更新回顾
【重学 JS】每天学习巩固基础系列文章:
【重温 JS】前端自动化工具-gulp、 【重温 JS】聊一聊设计模式, 及几种方式 单例|工厂|观察者模式、 【重温 JS】继承的几种方式 & 闭包 & 单例模式、 【重温 JS】原型和原型链 | 工厂模式 | 构造函数、 【重温 JS】巩固基础-面向对象/面向过程/类和对象
【重温 JS】巩固基础之-ajax 原理/缓存/接口、 【重温 JS】巩固基础 day23-前端也要了解一些数据库
【day1】js 初始、 【day2】各种运算符、 【day3】数据类型、 【day4】循环结构 & 条件语句、 【day5】函数(重点)、 【day6】作用域 & 事件、
【day7】对象 & 数组方法总结、 【day8】字符串方法 & 部分排序、
【day9】Math 对象 & 封装函数、 【day10】BOM-浏览器对象模型、
【day12】Event 事件对象初识(一)、 【day13】Event 事件对象初识(二)、
更多期待在路上... 学习 任重而道远==-..-==
