wenpack的实战
webpack的使用:
作用:
1.模块化
2.自定义的文件或者是npm install 安装的文件
3.静态文件的模块化 --需要借助插件和加载器
优势:
代码分离
装载器
装载和解析 css sass less jsx文件等
智能解析
require(... .ejs)
如何安装:
1.cnpm install -g webpack (安装webpack)
2.cnpm install webpack -dev-server (安装可以实时监控的服务器)
=======================================
1.整体的理解
app.js 我的随便的一个文件
我不直接的引入到index.js文件里面
而是将他打包,和其他需要引入的文件一样,
统一引入到bundle.js文件里面
下面是步骤:
1.新建一个文件夹(存放你的工程目录)
2.使用命令进行初始化
cnpm init (npm当然也是可以的)
3.在index.html引入bundle.js文件(其他的引入文件都在这个文件里面)
index.html 是展示页面
只需引入一个文件----bundle.js就可以了
其他的文件,在bundle.js里面进行引入
4.执行打包的命令:
单个的文件打包:
webpack app.js bundle.js
把app.js文件打包为bundle.js文件输出
需要打包的文件,一级路径不需要export
直接可以使用
多个文件的打包:(感觉和nodeJS类似)
一级文件 需要require()导入之后的,下级文件
下级文件,也是需要导出文件信息的
使用module.exports { } //导出了,才可以共享啊
webpack app.js bundle.js --watch
热加载--一直在监听
==============================================
2.引入第三方的库
以安装jQUery 库为例,来学习一下
cnpm i jQuert --save
(我好像忘了 --save和--save-dev的区别-->开发依赖和生产依赖的关系)
安装步骤:
1.cnpm i 安装包
cnpm i jquery --save
2.在app.js文件里面进行导入
let $=require("jquery");
3.在之后,直接使用即可
$("body").css({
background:'red'
})
疑问:(是否可以继承呢??)
上级文件使用了jQuery
导入的下级文件,可以直接使用jquery吗??
之后再做测试(vue是可以的--其他的不知道)
===========================
3.使用css的loader(加载器)
1.安装包:
cnpm i css-loader style-loader --save-dev (好像是开发环境依赖)
2.引入css的文件,在app.js文件里面(一级文件目录)
静态文件的引入是不一样的(修饰比较容易忘掉)前面是需要修饰的
require("!style-loader!css-loader!./style.css");
引入style.css 文件的方式
其实,这种方式不够简单
===========================================
4.优化的写法:
使用配置文件 webpack.config.js(我放在了根目录的下面了--不知道路径是否有讲究)
基础的配置代码:
module.exports={
//入口文件
entry:'./src/js/app.js',
//出口文件
output:{
//当前的文件夹下面,创建dist文件夹 下面创建bundle.js文件.作为出口
path:__dirname+"/dist", //路径,--dirname表示当前的路径
filename:"bundle.js" //出口的文件名(随便起)
},
//依赖的插件或者装载器
module:{
loaders:[
{
test:/\.css$/, //匹配文件
loader:"style-loader!css-loader", //匹配到的文件,需要使用到了加载器
}
]
}
再次之后,如何使用css样式文件呢??
require("../css/style.css");
直接引入,不需要前面加后缀了(世界如此简单)
最后,别忘了编译一下:
直接 webpack命令
后面都不需要写了,你都在配置文件里面写好了呀
====================================================
5.小技巧
如何看别人给自己代码设置的快捷方式(当然,可以自己设置自己的快捷方式)
在package.json文件里面
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"build":"webpack"
},
所谓的快捷方式:
就是,命令的代替
上文,使用了 cnpm run build 来代替命令 webpack 命令
这,就是快捷方式
注意:
这里需要使用 cnpm build (你自己定义的命令名称)
========================================================
6.建立本地的服务器
使项目可以直接在本地的服务器上运行
安装命令:
cnpm i webpack-dev-server -g --save-dev
安装到全局,并且安装到当前的项目中(开发环境)
在package.json里面,在给一个快捷方式
"scripts": {
"start": "webpack-dev-server --entry ./src/js/app.js --output-filename ./dist/bundle.js",
"test": "echo \"Error: no test specified\" && exit 1",
"build": "webpack"
},
当我们运行:
cnpm run start的时候
就会,运行之后的一连串命令()
命令的参数分析:
webpack-dev-server --entry ./src/js/app.js --output-filename ./dist/bundle.js
入口文件: ./src/js/app.js
出口文件名: ./dist/bundle.js(如果没有dist文件夹,是可以自己创建的)
执行步骤:
1.安装包
2.进行相关的配置
3.执行你自定义的命令
cnpm run build (构建包)
cnpm run start (打开服务器)
注意:
这个服务器也是实时监听的---为什么要用也???
--watch
==============================================================
7.babel的使用和配置
这才是重点(终于,来了)
一切都是为了ES6啊
关于babel的故事(babel是辨别的意思)
巴别塔:
巴别塔;是《圣经·旧约·创世记》第11章记载,
当时人类联合起来兴建希望能通往天堂的高塔;
为了阻止人类的计划,上帝让人类说不同的语言,使人类相互之间不能沟通,
计划因此失败,人类自此各散东西。
此事件,为世上出现不同语言和种族提供解释。
使用的具体步骤:
1.安装包
cnpm i babel-core babel-loader babel-preset-es2015 --save-dev
如果,需要编译babel-preset-react 大概也是这么个写法吧
2.在webpack.config.js文件里面进行配置
{
test:/\.js$/,
exclude:/node_modules/, //module模块文件太多了,排除掉就好了
loader:"babel-loader",
query:{ //查询预编译的内容
presets:["es2015"]
}
}
为了减少工作量,需要去掉node-modules文件夹下面的内容,所以需要排除的
webpack的使用:
作用:
1.模块化
2.自定义的文件或者是npm install 安装的文件
3.静态文件的模块化 --需要借助插件和加载器
优势:
代码分离
装载器
装载和解析 css sass less jsx文件等
智能解析
require(... .ejs)
如何安装:
1.cnpm install -g webpack (安装webpack)
2.cnpm install webpack -dev-server (安装可以实时监控的服务器)
=======================================
1.整体的理解
app.js 我的随便的一个文件
我不直接的引入到index.js文件里面
而是将他打包,和其他需要引入的文件一样,
统一引入到bundle.js文件里面
下面是步骤:
1.新建一个文件夹(存放你的工程目录)
2.使用命令进行初始化
cnpm init (npm当然也是可以的)
3.在index.html引入bundle.js文件(其他的引入文件都在这个文件里面)
index.html 是展示页面
只需引入一个文件----bundle.js就可以了
其他的文件,在bundle.js里面进行引入
4.执行打包的命令:
单个的文件打包:
webpack app.js bundle.js
把app.js文件打包为bundle.js文件输出
需要打包的文件,一级路径不需要export
直接可以使用
多个文件的打包:(感觉和nodeJS类似)
一级文件 需要require()导入之后的,下级文件
下级文件,也是需要导出文件信息的
使用module.exports { } //导出了,才可以共享啊
webpack app.js bundle.js --watch
热加载--一直在监听
==============================================
2.引入第三方的库
以安装jQUery 库为例,来学习一下
cnpm i jQuert --save
(我好像忘了 --save和--save-dev的区别-->开发依赖和生产依赖的关系)
安装步骤:
1.cnpm i 安装包
cnpm i jquery --save
2.在app.js文件里面进行导入
let $=require("jquery");
3.在之后,直接使用即可
$("body").css({
background:'red'
})
疑问:(是否可以继承呢??)
上级文件使用了jQuery
导入的下级文件,可以直接使用jquery吗??
之后再做测试(vue是可以的--其他的不知道)
===========================
3.使用css的loader(加载器)
1.安装包:
cnpm i css-loader style-loader --save-dev (好像是开发环境依赖)
2.引入css的文件,在app.js文件里面(一级文件目录)
静态文件的引入是不一样的(修饰比较容易忘掉)前面是需要修饰的
require("!style-loader!css-loader!./style.css");
引入style.css 文件的方式
其实,这种方式不够简单
===========================================
4.优化的写法:
使用配置文件 webpack.config.js(我放在了根目录的下面了--不知道路径是否有讲究)
基础的配置代码:
module.exports={
//入口文件
entry:'./src/js/app.js',
//出口文件
output:{
//当前的文件夹下面,创建dist文件夹 下面创建bundle.js文件.作为出口
path:__dirname+"/dist", //路径,--dirname表示当前的路径
filename:"bundle.js" //出口的文件名(随便起)
},
//依赖的插件或者装载器
module:{
loaders:[
{
test:/\.css$/, //匹配文件
loader:"style-loader!css-loader", //匹配到的文件,需要使用到了加载器
}
]
}
再次之后,如何使用css样式文件呢??
require("../css/style.css");
直接引入,不需要前面加后缀了(世界如此简单)
最后,别忘了编译一下:
直接 webpack命令
后面都不需要写了,你都在配置文件里面写好了呀
====================================================
5.小技巧
如何看别人给自己代码设置的快捷方式(当然,可以自己设置自己的快捷方式)
在package.json文件里面
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"build":"webpack"
},
所谓的快捷方式:
就是,命令的代替
上文,使用了 cnpm run build 来代替命令 webpack 命令
这,就是快捷方式
注意:
这里需要使用 cnpm build (你自己定义的命令名称)
========================================================
6.建立本地的服务器
使项目可以直接在本地的服务器上运行
安装命令:
cnpm i webpack-dev-server -g --save-dev
安装到全局,并且安装到当前的项目中(开发环境)
在package.json里面,在给一个快捷方式
"scripts": {
"start": "webpack-dev-server --entry ./src/js/app.js --output-filename ./dist/bundle.js",
"test": "echo \"Error: no test specified\" && exit 1",
"build": "webpack"
},
当我们运行:
cnpm run start的时候
就会,运行之后的一连串命令()
命令的参数分析:
webpack-dev-server --entry ./src/js/app.js --output-filename ./dist/bundle.js
入口文件: ./src/js/app.js
出口文件名: ./dist/bundle.js(如果没有dist文件夹,是可以自己创建的)
执行步骤:
1.安装包
2.进行相关的配置
3.执行你自定义的命令
cnpm run build (构建包)
cnpm run start (打开服务器)
注意:
这个服务器也是实时监听的---为什么要用也???
--watch
==============================================================
7.babel的使用和配置
这才是重点(终于,来了)
一切都是为了ES6啊
关于babel的故事(babel是辨别的意思)
巴别塔:
巴别塔;是《圣经·旧约·创世记》第11章记载,
当时人类联合起来兴建希望能通往天堂的高塔;
为了阻止人类的计划,上帝让人类说不同的语言,使人类相互之间不能沟通,
计划因此失败,人类自此各散东西。
此事件,为世上出现不同语言和种族提供解释。
使用的具体步骤:
1.安装包
cnpm i babel-core babel-loader babel-preset-es2015 --save-dev
如果,需要编译babel-preset-react 大概也是这么个写法吧
2.在webpack.config.js文件里面进行配置
{
test:/\.js$/,
exclude:/node_modules/, //module模块文件太多了,排除掉就好了
loader:"babel-loader",
query:{ //查询预编译的内容
presets:["es2015"]
}
}
为了减少工作量,需要去掉node-modules文件夹下面的内容,所以需要排除的