模块打包工具webpack
1.webpack的安装
1.1在安装node的基础上,npm install -g webpack(window版本,因为是全局安装,所以无所谓是哪个路径下)
1.2新建一个文件夹用于此项目 eg:D盘新建一个mywebpack文件夹
1.3找到这个文件夹,npm init 完成之后在mywebpack文件夹中出现一个package.json文件,文件中是刚执行的操作内容
1.4在mypack文件中新建一个index.html,引入一个bundle.js(注意:这时bundle.js是没有的),再新建一个app.js,app.js中写入操作。要达到的目的是引用bundle.js一个js文件可以用到app.js或更多js的功能。
代码:
app.js中:
alert("我是app.js")
然后运行:在同等目录下执行webpack app.js bundle.js 这时,运行index.html会出现app.js里面的内容,文件夹中会自动创建bundle.js
1.4.1 如果想要bundle.js用到app.js以及其他js的内容可以这样做。
新建people.js
//字符串形式
module.exports="我是people.jshhh";
//函数形式
function getinfo(){ //函数
return "我是函数";
}
module.exports=getinfo(); //getinfo()对外公开
//数组、对象形式
let people=[
{name:"hanna"},
{name:"xumin"}
]
module.exports=people;
app.js中
//需要用require注入,需要注意的是require后面,如果是自己写的js,就算是同级目录也需要写./ 如果是引入的库什么的不需要写./
var people=require("./people.js");
console.log(people[0].name);
当然每次修改了需要执行一次:webpack app.js bundle.js 如果想要每修改一次自动监听,执行一次webpack app.js bundle.js --watch 就可以了
2.webpack-运用第三方库
2.1 使用第三方库(jquery)
对应文件夹下 npm install iquery --save
//测试是否引用了jquery
let $=require("jquery");
$.each(people,function(key,value){
$("body").append("<h3>"+people[key].name+"</h3>")
});
2.2 模块化静态文件(css)
要安装css-loader 做法是在当前目录执行 npm install css-loader style-loader --save-dev
require("!style-loader!css-loader!./index.css")
2.3 使用配置文件webpack.config.js (当需要有多个css文件引入时,需要用到webpack.config.js)
做法:(1)在mywebpack文件夹下面新建webpack.config.js(名称一定是这个)
(2)在webpack.config.js中写
module.exports={
//入口文件
entry:"./app.js",
//出口文件
output:{
path:__dirname, //当前路径
filename:"bundle.js"
},
//需要依赖的插件或者装载器
module:{
loaders:[
{test:/\.css$/,loader:"style-loader!css-loader"}
]
}
}
然后app.js中需要修改:
有原来的require("!style-loader!css-loader!./index.css")
修改为:require("./index.css");
重新执行webpack app.js bundle.js --watch就可以啦
优化一下:
mywebpack下面创建src文件夹(js文件夹、css文件夹),可以把之前的app.js、people.js放入src下面的js文件夹中,其中对应的文件路径对应修改一下,可以删掉bundle.js文件,重新生成一下:
webpack.config.js中变化:
module.exports={
//入口文件
entry:"./src/js/app.js",
//出口文件
output:{
path:__dirname+"/dist",
filename:"bundle.js" //在当前路径下创建dist文件夹,在dist文件夹下面创建bundle.js
},
//需要依赖的插件或者装载器
module:{
loaders:[
{test:/\.css$/,loader:"style-loader!css-loader"}
]
}
}
修改其他文件对应的文件时,在当前文件下执行webpack就可以,不再是webpack app.js bundle.js --watch 因为路径发生了变化,执行webpack可以找到webpack.config.js,即一切顺理成章。
再优化:可以在package.json文件夹中修改
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
为
"scripts": {
"build":"webpack"
},
这样在当前文件夹下面只需要执行npm run build就可以 不需要是webpack
2.4 使用webpack-dev-server
2.4.1 使用webpack-dev-server(可以搭建服务器,实时监听)
其好处是可以将自己的项目在本地的服务器中去运行
(1)首先安装
npm install -g webpack-dev-server --save-dev
(2)在package.json中修改添加start
"scripts": {
"start":"webpack-dev-server --entry .src/js/app.js --output-filename ./dist/bundle.js",
"build":"webpack"
},
在当前文件夹下面执行 npm run build创建完项目,npm start 可以利用本地的服务器来监听做错
2.4.2 使用babel转换插件(可以将es6语法转换成es5语法,)
(1)安装babel
npm install babel-core babel-loader babel-preset-es2015 --save-dev (这里-es2015是你想要转换成的语言,这里是es5,babel-core是核心插件, babel-loader是装载器)
(2)在webpack.config.js中配置
module:{
loaders:[
{test:/\.css$/,loader:"style-loader!css-loader"},
{
test:/\.js$/,loader:"babel-loader",
exclude:/node_modules/, //除了这个文件
query:{ //查询
preset:["es2015"]
}
}
]
}
(3)重构项目 npm run build
(4)npm start 运行
(5)可以在bundle.js中看到已经将app.js中使用的es6语法修改为es5了。
模块打包工具webpack的更多相关文章
- 浅谈Webpack模块打包工具一
为什么要使用模块打包工具 1.模块化开发ES Modules存在兼容性问题 打包之后成产阶段编译为ES5 解决兼容性问题 2.模块文件过多 网络请求频繁 开发阶段把散的模块打包成一个模块 解决网络请 ...
- 打包工具webpack和热加载深入学习
本次小编呢,为大家带来一篇深入了解打包工具 webpack. 我们今天使用的是 webpack3.8.1版本的,我们学习使用 3.8.1更稳定些,并学习自己如何配置文件,最新版本不需要自己配置文件,但 ...
- 浅谈Webpack模块打包工具四
Webpack 生产环境优化 生产环境和开发环境有很大的差异,生产环境只注重运行效率,开发环境主要开发效率,webpack4.0开始提出了(mode)模式的概念 针对不同的环境进行不同的配置,为不同的 ...
- 模块化管理工具兼打包工具 webpack
webpack 是一个[模块化管理工具]兼[打包工具] 是一个工具(和seajs,requirejs管理前端模块的方式是不一样) 在webpack一个文件就是一个模块! seajs,requirejs ...
- 好用的打包工具webpack
<什么是webpack> webpack是一个模块打包器,任何静态资源(js.css.图片等)都可以视作模块,然后模块之间也可以相互依赖,通过webpack对模块进行处理后,可以打包成我们 ...
- 细说前端自动化打包工具--webpack
背景 记得2004年的时候,互联网开发就是做网页,那时也没有前端和后端的区分,有时一个网站就是一些纯静态的html,通过链接组织在一起.用过Dreamweaver的都知道,做网页就像用word编辑文档 ...
- 打包工具webpack安装·Mac
最近在学Vue.js,是我接触的第一个前端框架.本来感觉还不错,各种惊叹于它可以用很少的代码写出那种具备交互能力的神奇模块. 在学的过程中总是能碰到一个叫webpack的单词,查过,是一个模块打包器, ...
- 浅谈Webpack模块打包工具三
Source Map 生产代码与开发代码完全不同,如果需要调试应用的话会非常的麻烦,错误信息无法定位,Soutce Map就会逆向得到源代码, 须在打包之后的代码文件的末尾位置例如添加//# sour ...
- Webpack, 现在最流行的模块打包工具.压缩打包
压缩bundle.js 1.把我们项目的代码从es6 -> es5 [babel] 参考:http://babeljs.io/docs/setup/#installation 1.1.安装包 b ...
随机推荐
- ECG心电图数据1
最近在写一篇基于小波变换的ECG信号压缩算法的论文,遇到了怎样获取ECG信号测试数据的问题,在百度和专业论坛里搜索了一番,发现也有很多朋友为此发愁.现在论文写好了,投稿中,顺便也把怎样获取和处理ECG ...
- Elasticsearch 健康状态处理
笔者在自己的 ubuntu 服务器上使用 GET /_cat/health?v 命令时,返回值如下所示 可以看到集群状态为 yellow,这是什么意思呢?原来在 es 的集群状态中,有三种情况,官网描 ...
- python实现斐波那契数列笔记
斐波那契数列即著名的兔子数列:1.1.2.3.5.8.13.21.34.…… 数列特点:该数列从第三项开始,每个数的值为其前两个数之和,用python实现起来很简单: a=0 b=1 while b ...
- ASP.NET MVC+Redis (准备工作)
今天准备更新这个项目的第二篇博客.有一点需要说明的是之前觉得用的是Asp.net的WebPage,经过查看微软的官方文档还有相关的博客,相比较而言使用起来需要安装一个自动工具WebMatrix可以很快 ...
- .netcore与vue的学习笔记001
1.dnc的js引用 需要引用的js文件要放在解决方案下的wwwroot目录下.否则将无法获取到指定js文件,出现404错误 2.vue的相关运用 0)通过new Vue并传入object来实例化一个 ...
- wpf ,只能窗口调整高度,并且设定最小值。
MaxWidth="900" WindowStyle="ToolWindow" ResizeMode="CanResize" WindowS ...
- sql service 备份
declare @SqlBackupDataBase as nvarchar(1000)set @SqlBackupDataBase=N'BACKUP DATABASE YSKJ_Wechat TO ...
- 在sqlite中,如何删除字段? how to drop a column in sqlite
在sqlite中可以使用ALTER TABLE语法对表结构进行修改,从官方的文档说明中,语法如下图: 从图中可以看出,ALTER TABLE仅仅支持表名重命名,添加字段,却没有删除字段的方法.那么该如 ...
- 初识面向对象-封装、property装饰器、staticmathod(静态的方法)、classmethod(类方法) (五)
封装 # class Room:# def __init__(self,name,length,width):# self.__name = name# self.__length = length# ...
- jQuery基础笔记(2)
day54 筛选器 参考:https://www.cnblogs.com/liwenzhou/p/8178806.html#autoid-1-7-5 筛选器方法 下一个元素: $("#id& ...