模块打包工具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 ...
随机推荐
- VSTO学习笔记
文档类型程序发布: 安装.NetFrameWork Visual Studio 2010 Tools for Office Runtime 4.0下载地址: http://www.microsoft. ...
- VS2010与Qt5.1.0的集成
早就听说qt可以集成到VS中,就是一直没尝试过.一直在使用qt creator,也没觉得它有什么不好.可最近VS用多了,我发现一个qt creator中很不好的毛病,就是代码自动完成时,creator ...
- visual studio code 中隐藏从 ts 文件生成的 js 文件和 map 文件
typescript 文件编译产生的 js 和 map 文件不需要手工编辑,打开[文件][首选项][工作区设置],放入以下代码: // 将设置放入此文件中以覆盖默认值和用户设置. { "fi ...
- ThinkPad T430i,如何将WIN8换成WIN7???
1. 启动时不断点击键盘上的F1键,进入BIOS 界面选择“Restart”→把 “OS Optimized Default”设置为 “disabled” ,(OS Optimized Default ...
- android RadioButton文字居中的方法
每个RadioButton的style原先是这样的: <style name="radiobutton_style" > <item name="and ...
- Feed back TFS 2017 RC upgrade status to product team in product group 2017.03.01
作为微软的MVP,有一个我最喜欢的好处,就是可以与产品组(产品研发部门)有零距离接触,可以最先拿到即将发版的产品,并且和产品组沟通,对产品中出现的问题实时反馈. 看到TFS产品组吸收了自己的建议和反馈 ...
- c++ 日志输出库 spdlog 简介(4)- 多线程txt输出日志
在上一节的代码中加入了向文本文件中写入日志的代码: UINT CMFCApplication1Dlg::Thread1(LPVOID pParam) { try{ size_t q_size = ; ...
- telerik:RadGrid 表格中删除数据
<telerik:RadGrid OnItemCommand=" Height="490px" Culture="zh-CN" CssClass ...
- 执行js-----Selenium快速入门(十四)
Selenium能够执行js,这使得Selenium拥有更为强大的能力.既然能执行js,那么js能做的事,Selenium应该大部分也能做.这应该得益于JavascriptExecutor这个接口,而 ...
- VUE.js 中取得后台原生HTML字符串 原样显示问题
今天使用vue调试页面,发现了页面上的一个问题,后台数据传过来的HTML字符串并没有被转换为正常的HTML代码,一拍脑门,发现忘记转换了,于是满心欢喜加上了{{{}}}.但是之后构建发现报错: 为此去 ...