1. webpack介绍
在传统的项目中，一个html文件可能会加载多个js、css文件，如果多人协同开发的话，就会出现全局变量被污染、文件直接的依赖问题
而webpack打包工具，会先分析入口文件的依赖，以及依赖的依赖，以此类推，只要有依赖都去分析并打包到输出文件中
例：app.js中需要cat.js，webpack就会将这些依赖分析之后，打包到bundle.js文件中，以后直接使用打包好的bundle.js文件
2. webpack安装
- 全局安装：
cnpm install webpack webpack-cli –g
- 建议本地也安装一次：
cnpm install webpack webpack-cli --save-dev
例：在cat.js中导出一个数组，App.js 中需使用 cat.js 文件中的数组，需要require()加载
cat.js 代码
let cats = ['黑猫警长','大脸猫','波斯猫']
module.exports = catsapp.js 代码
//加载 cat.js 导出的数组
const cats = require("./cat")
console.log(cats)index.html 代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script type="text/javascript" src="app.js"></script>
</head>
<body> </body>
</html>在浏览器中访问：
注：前提先安装好 webpack
解决方法：webpack会分析 app.js 文件中的依赖，并找到依赖的文件，将最终的代码打包到一个文件中。输入命令：
webpack app.js –o bundle.js
打开目录，其中有创建好的 bundle,js 文件，在 index.html 文件中直接使用该文件
打开浏览器重新运行
3. webpack 使用流程
- 先搭建目录结构
- 初始化 package.json
npm init -y
注：-y表示创建一个默认的 package.json 文件
- 安装webpack
- 全局安装
cnpm install webpack webpack-cli –g
- （建议）本地也安装一次：
cnpm install webpack webpack-cli –-save-dev
- 搭建基本的目录结构（src：保存源代码；dist：保存编译之后的文件，即打包之后的文件）
- 创建 src 目录下的入口文件，通常取名为：app.js
- 创建 webpack.config.js 配置文件
module.exports = {
//告诉 webpack 入口文件
entry: __dirname + "/src/app.js",
//打包后的文件输出到哪个目录，即打包后的文件存放目录
output: {
path: __dirname + "/dist",
filename: "bundle.js"//打包后输出文件的文件名
}
}
- 通过 webpack 打包
- app.js 及 app.js 文件的依赖将被打包到 bundle.js，以后直接使用 bundle.js
4. style-loader、css-loader安装
例：若要将 css 文件和 js 文件打包到一起
cat.js 代码
let cats = ['黑猫警长','大脸猫','波斯猫']
module.exports = catsindex.html 代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script type="text/javascript" src="dist/bundle.js"></script>
</head>
<body> </body>
</html>style.css 代码
body{
background-color: blue;
}app.js 代码
let cats = require("./cat")
require("./style.css")
console.log(cats)控制台打包：目前无法解析 css 文件
- 解决方法：安装 style-loader，css-loader
cnpm install style-loader css-loader –-save-dev
- 安装后，还需在webpack 配置文件中添加红色部分的内容：
module.exports = {
//告诉 webpack 入口文件
entry: __dirname + "/src/app.js",
//打包后的文件输出到哪个目录，即打包后的文件存放目录
output: {
path: __dirname + "/dist",
filename: "bundle.js"//打包后输出文件的文件名
},
module:{
//定义规则：使用 webpack 打包的文件有哪些
rules:[
{
//以.css 结尾的文件
test: /\.css$/,
//忽略node_modules目录
exclude: /node_modules/,
//多个loader使用！隔开
loader: "style-loader!css-loader"
}
]
}
}
注：逗号很重要！！！后面的打包，我因为没有加这个逗号，而出现错误（设置了 css 文件，代码无错误，控制台打包也无错误，浏览器无错误提示，但就是样式出不来）
- 再次执行webpack 命令进行打包
- 在浏览器中访问 index.html
5. 自动打包
自动打包会监测源码的改动，源码一旦改动，则自动进行打包
5.1 方法一
- 执行后会占用当前窗口，可通过 ctrl+c 关闭该进程
webpack –w
- 测试：修改css代码
body{
background: red;
}
- webpack 已自动打包，需要刷新浏览器
5.2 方法二：搭建本地服务器
通过本地服务器，可监测源码的改变并自动打包，且自动刷新浏览器
- 需安装 webpack-dev-server
cnpm install webpack-dev-server –-save-dev
- 在 webpack.config.js 配置文件中配置 webpack-dev-server 服务器的端口信息（红色部分）
module.exports = {
//告诉 webpack 入口文件
entry: __dirname + "/src/app.js",
//打包后的文件输出到哪个目录，即打包后的文件存放目录
output: {
path: __dirname + "/dist",
filename: "bundle.js"//打包后输出文件的文件名
},
devServer:{
//端口号
port:8888,
//热更新，一旦检测到源码变化，立即刷新
hot:true,
inline:true
},
module:{
//定义规则：使用 webpack 打包的文件有哪些
rules:[
{
//以.css 结尾的文件
test: /\.css$/,
//忽略node_modules目录
exclude: /node_modules/,
//多个loader使用！隔开
loader: "style-loader!css-loader"
}
]
}
}
- 在 package.json 的 scripts 中添加一个命令：dev（也可用其他名字，如 abc 等）（红色部分）
{
"name": "webpack-demo",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"dev":"webpack-dev-server --hot --inline",
"test": "echo \"Error: no test specified\" && exit 1"
},
"keywords": [],
"author": "",
"license": "ISC",
"devDependencies": {
"css-loader": "^0.28.11",
"style-loader": "^0.21.0",
"webpack":"^4.8.3",
"webpack-cli":"^2.1.3",
"webpack-dev-server": "^3.1.4"
}
}
- 将来执行自动打包命令时，直接执行如下命令：
npm run dev
注：在 index.html 内引入 bundle.js 文件时，需写 http:// 路径
<script type="text/javascript" src="http://localhost:8888/bundle.js"></script>
6. less-loader安装
less 文件提升 css 的开发效率，但实际运行时需将 less 文件转换成 css文件（less-loader 可完成转换）
- 安装less、less-loader
cnpm install less less-loader –-save-dev
- 修改 webpack.config.js 配置文件（红色部分）
module.exports = {
//告诉 webpack 入口文件
entry: __dirname + "/src/app.js",
//打包后的文件输出到哪个目录，即打包后的文件存放目录
output: {
path: __dirname + "/dist",
filename: "bundle.js"//打包后输出文件的文件名
},
devServer:{
//端口号
port:8888,
//热更新，一旦检测到源码变化，立即刷新
hot:true,
inline:true
},
module:{
//定义规则：使用 webpack 打包的文件有哪些
rules:[
{
//以.css 结尾的文件
test: /\.css$/,
//忽略node_modules目录
exclude: /node_modules/,
//多个loader使用！隔开
loader: "style-loader!css-loader"
}
{
test: /\.less$/,
exclude: /node_modules/,
loader: "style-loader!css-loader!less-loader"
}
]
}
}
测试：
style.less 代码
@c:red;
body{
h1{
color:@c
}
}
app.js 代码
let cats = require("./cat")
require("./style.less")
console.log(cats)
index.html 代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script type="text/javascript" src="http://localhost:8888/bundle.js"></script>
</head>
<body>
<h1>我是标题</h1>
</body>
</html>
7. ES6模块化开发
ES6 新增一个模块化开发功能，可将不同功能封装到不同 js 文件中，再通过webpack打包到一起。因有些浏览器不支持ES6语法，故需安装 loader 将 ES6 转换为 JavaScript 代码，命令如下：
cnpm install babel-core babel-loader babel-preset-es2015 babel-preset-stage-2 --save-dev
- 修改webpack.config.js（红色部分）
module.exports = {
entry: __dirname + "/src/app.js",
output: {
path: __dirname + "/dist",
filename: "bundle.js"
},
devServer:{
port:8888,
hot:true,
inline:true
},
module:{
rules:[
{
test: /\.css$/,
exclude: /node_modules/,
loader: "style-loader!css-loader"
},
{
test: /\.less$/,
exclude: /node_modules/,
loader: "style-loader!css-loader!less-loader"
},
{
test:/\.js$/,
loader:"babel-loader",
exclude:/node_modules/,
query:{
presets:["es2015","stage-2"]
}
}
]
}
}
7.1 ES6 导出变量、函数、类
- export let 变量名 导出一个变量
- export function 函数名 导出一个函数
- export class 类名 导出一个类
- export default 成员 导出成员，只能导出一个成员
例：person.js 代码
//导出变量
export let name="David"
//导出函数
export function getName(){
console.log("获取姓名")
}
//导出类
export class Person{
//构造函数
constructor(name){this.name = name;
}
//成员方法
say(){
console.log("我是：" + this.name)
}
}
//导出成员
export default class People{
constructor(name){
this.name = name;
}
say(){
console.log("你好，"+this.name)
}
}
7.2 ES6 导入变量、函数、类
语法：import {变量名 , 函数名 , 类名 } from ‘文件名’
导入多个成员使用“，”逗号隔开
注：若导出的成员是export default，则导入时，不可使用 {}，直接：import 成员
例：app.js 代码
//导入变量、函数、类
import {name,getName,Person} from './person'
console.log(name)
getName()
var people1 = new Person('Mike');
people1.say()
//导入成员
import People from "./person"
var people2 = new People('Nancy')
people2.sayHi()
测试：npm run dev 打包后，浏览器运行：
8. webpack 插件
8.1 内置插件（webpack提供）
BannerPlugin：在 bundle.js 文件的头部插入一条说明性文件
- 修改webpack.config.js 文件（红色部分）
let wp = require("webpack")
module.exports = {
entry: __dirname + "/src/app.js",
output: {
path: __dirname + "/dist",
filename: "bundle.js"
},
devServer:{
port:8888,
hot:true,
inline:true
},
module:{
rules:[
{
test: /\.css$/,
exclude: /node_modules/,
loader: "style-loader!css-loader"
},
{
test: /\.less$/,
exclude: /node_modules/,
loader: "style-loader!css-loader!less-loader"
},
{
test: /\.js$/,
loader: "babel-loader",
exclude: /node_modules/,
query: {
presets:["es2015","stage-2"]
}
}
]
},
plugins:[
new wp.BannerPlugin("版权保护")
]
}
- 重新打包，运行结果如下：
8.2 外部插件（第三方插件）
执行npm run dev后，自动打开浏览器的插件：open-browser-webpack-plugin。安装命令如下：
cnpm install open-browser-webpack-plugin --save-dev
- 修改webpack.config.js配置文件（红色部分）
let wp = require("webpack")
const OpenBrowserPlugin = require("open-browser-webpack-plugin")
module.exports = {
entry: __dirname + "/src/app.js",
output: {
path: __dirname + "/dist",
filename: "bundle.js"
},
devServer:{
port:8888,
hot:true,
inline:true
},
module:{
rules:[
{
test: /\.css$/,
exclude: /node_modules/,
loader: "style-loader!css-loader"
},
{
test: /\.less$/,
exclude: /node_modules/,
loader: "style-loader!css-loader!less-loader"
},
{
test: /\.js$/,
loader: "babel-loader",
exclude: /node_modules/,
query: {
presets:["es2015","stage-2"]
}
}
]
},
plugins:[
new wp.BannerPlugin("版权保护"),
new OpenBrowserPlugin({url:"http://localhost:8888"})
]
}
- 执行npm run dev，重新打包即可
webpack入门操作教程的更多相关文章
-
java之servlet入门操作教程一续
本节主要是在java之servlet入门操作教程一 的基础上使用myeclipse实现自动部署的功能 准备: java之servlet入门操作教程一 中完成myFirstServlet项目的创建: ...
-
ASP.NET Aries 入门开发教程7：DataGrid的行操作（主键操作区）
前言: 抓紧勤奋,再接再励,预计共10篇来结束这个系列. 上一篇介绍:ASP.NET Aries 入门开发教程6:列表数据表格的格式化处理及行内编辑 本篇介绍主键操作区相关内容. 1:什么时候有默认的 ...
-
MyBatis入门学习教程-使用MyBatis对表执行CRUD操作
上一篇MyBatis学习总结(一)--MyBatis快速入门中我们讲了如何使用Mybatis查询users表中的数据,算是对MyBatis有一个初步的入门了,今天讲解一下如何使用MyBatis对use ...
-
Python学习入门基础教程(learning Python)--5.6 Python读文件操作高级
前文5.2节和5.4节分别就Python下读文件操作做了基础性讲述和提升性介绍,但是仍有些问题,比如在5.4节里涉及到一个多次读文件的问题,实际上我们还没有完全阐述完毕,下面这个图片的问题在哪呢? 问 ...
-
webpack入门文档教程
.octicon{margin-right:2px}a.tabnav-extra:hover{color:#4078c0;text-decoration:none}.tabnav-btn{margin ...
-
[转]Webpack 入门教程
本文转自:http://www.runoob.com/w3cnote/webpack-tutorial.html Webpack 是一个前端资源加载/打包工具.它将根据模块的依赖关系进行静态分析,然后 ...
-
Angular2入门系列教程7-HTTP（一）-使用Angular2自带的http进行网络请求
上一篇:Angular2入门系列教程6-路由(二)-使用多层级路由并在在路由中传递复杂参数 感觉这篇不是很好写,因为涉及到网络请求,如果采用真实的网络请求,这个例子大家拿到手估计还要自己写一个web ...
-
Angular2入门系列教程6-路由（二）-使用多层级路由并在在路由中传递复杂参数
上一篇:Angular2入门系列教程5-路由(一)-使用简单的路由并在在路由中传递参数 之前介绍了简单的路由以及传参,这篇文章我们将要学习复杂一些的路由以及传递其他附加参数.一个好的路由系统可以使我们 ...
-
Angular2入门系列教程4-服务
上一篇文章 Angular2入门系列教程-多个组件,主从关系 在编程中,我们通常会将数据提供单独分离出来,以免在编写程序的过程中反复复制粘贴数据请求的代码 Angular2中提供了依赖注入的概念,使得 ...
随机推荐
-
hdu 1087 Super Jumping! Jumping! Jumping! 简单的dp
Super Jumping! Jumping! Jumping! Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 65536/32768 ...
-
bzoj 1856: [Scoi2010]字符串
#include<cstdio> #include<iostream> #define Q 20100403 ; int main() { scanf("%lld%l ...
-
university, school, college, department, institute的区别
这些个词没有太大区别,有时候有些词是可以通用的,而有些用法则是随着地域时间的不同而变迁. 一般说来,college译作“学院”,它是university (综合性大学)的一个组成部分,例如,一所综合大 ...
-
ECMA中关于if与else的关系的一句英文，感觉比较经典
Each else for which the choice of assocated if is ambiguous shall be associated with the nearest pos ...
-
HTML css面试题
1.对WEB标准以及W3C的理解与认识 标签闭合.标签小写.不乱嵌套.提高搜索机器人搜索几率.使用外链css和js脚本.结构行为表现的分离.文件下载与页面速度更快.内容能被更多的用户所访问.内容能被更 ...
-
《Python编程从入门到实践》第三章_列表简介
什么是列表呢? 官方说明就是由一些列按特点顺序排列的元素组成.其实可以看出很多个字符串的有序组合吧,里面的内容可以随时的删除,增加,修改. 下面这个就是一个列表,python打印列表的时候会将中括号和 ...
-
route路由的顺序问题了数据包的转发流程
2018-02-28 15:29:26 [root@linux ~]# routeKernel IP routing tableDestination Gateway ...
-
Windows之常用命令
1. 重启/关机 shutdown命令 #关机 shutdown -s -t -f #重启 shutdown -r -t //30秒之后,重启 00是立即 #注销 shutdown -l -t #休眠 ...
-
【原】配置MySQL服务器端的字符集
[简述] 通过直接配置my.cnf方式修改mysql的字符集,这种方式并不复杂,但是,在linux端配置时,特别容易出错,因此,记录之,以待后用. [配置步骤描述]Step 1:关闭当前的MySQL服 ...
-
1265. [NOIP2012] 同余方程
1265. [NOIP2012] 同余方程 ★☆ 输入文件:mod.in 输出文件:mod.out 简单对比 时间限制:1 s 内存限制:128 MB [题目描述] 求关于 x 的同余 ...