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的更多相关文章

  1. 浅谈Webpack模块打包工具一

    为什么要使用模块打包工具 1.模块化开发ES Modules存在兼容性问题 打包之后成产阶段编译为ES5 解决兼容性问题 2.模块文件过多 网络请求频繁  开发阶段把散的模块打包成一个模块 解决网络请 ...

  2. 打包工具webpack和热加载深入学习

    本次小编呢,为大家带来一篇深入了解打包工具 webpack. 我们今天使用的是 webpack3.8.1版本的,我们学习使用 3.8.1更稳定些,并学习自己如何配置文件,最新版本不需要自己配置文件,但 ...

  3. 浅谈Webpack模块打包工具四

    Webpack 生产环境优化 生产环境和开发环境有很大的差异,生产环境只注重运行效率,开发环境主要开发效率,webpack4.0开始提出了(mode)模式的概念 针对不同的环境进行不同的配置,为不同的 ...

  4. 模块化管理工具兼打包工具 webpack

    webpack 是一个[模块化管理工具]兼[打包工具] 是一个工具(和seajs,requirejs管理前端模块的方式是不一样) 在webpack一个文件就是一个模块! seajs,requirejs ...

  5. 好用的打包工具webpack

    <什么是webpack> webpack是一个模块打包器,任何静态资源(js.css.图片等)都可以视作模块,然后模块之间也可以相互依赖,通过webpack对模块进行处理后,可以打包成我们 ...

  6. 细说前端自动化打包工具--webpack

    背景 记得2004年的时候,互联网开发就是做网页,那时也没有前端和后端的区分,有时一个网站就是一些纯静态的html,通过链接组织在一起.用过Dreamweaver的都知道,做网页就像用word编辑文档 ...

  7. 打包工具webpack安装·Mac

    最近在学Vue.js,是我接触的第一个前端框架.本来感觉还不错,各种惊叹于它可以用很少的代码写出那种具备交互能力的神奇模块. 在学的过程中总是能碰到一个叫webpack的单词,查过,是一个模块打包器, ...

  8. 浅谈Webpack模块打包工具三

    Source Map 生产代码与开发代码完全不同,如果需要调试应用的话会非常的麻烦,错误信息无法定位,Soutce Map就会逆向得到源代码, 须在打包之后的代码文件的末尾位置例如添加//# sour ...

  9. Webpack, 现在最流行的模块打包工具.压缩打包

    压缩bundle.js 1.把我们项目的代码从es6 -> es5 [babel] 参考:http://babeljs.io/docs/setup/#installation 1.1.安装包 b ...

随机推荐

  1. VSTO学习笔记

    文档类型程序发布: 安装.NetFrameWork Visual Studio 2010 Tools for Office Runtime 4.0下载地址: http://www.microsoft. ...

  2. VS2010与Qt5.1.0的集成

    早就听说qt可以集成到VS中,就是一直没尝试过.一直在使用qt creator,也没觉得它有什么不好.可最近VS用多了,我发现一个qt creator中很不好的毛病,就是代码自动完成时,creator ...

  3. visual studio code 中隐藏从 ts 文件生成的 js 文件和 map 文件

    typescript 文件编译产生的 js 和 map 文件不需要手工编辑,打开[文件][首选项][工作区设置],放入以下代码: // 将设置放入此文件中以覆盖默认值和用户设置. { "fi ...

  4. ThinkPad T430i,如何将WIN8换成WIN7???

    1. 启动时不断点击键盘上的F1键,进入BIOS 界面选择“Restart”→把 “OS Optimized Default”设置为 “disabled” ,(OS Optimized Default ...

  5. android RadioButton文字居中的方法

    每个RadioButton的style原先是这样的: <style name="radiobutton_style" > <item name="and ...

  6. Feed back TFS 2017 RC upgrade status to product team in product group 2017.03.01

    作为微软的MVP,有一个我最喜欢的好处,就是可以与产品组(产品研发部门)有零距离接触,可以最先拿到即将发版的产品,并且和产品组沟通,对产品中出现的问题实时反馈. 看到TFS产品组吸收了自己的建议和反馈 ...

  7. c++ 日志输出库 spdlog 简介(4)- 多线程txt输出日志

    在上一节的代码中加入了向文本文件中写入日志的代码: UINT CMFCApplication1Dlg::Thread1(LPVOID pParam) { try{ size_t q_size = ; ...

  8. telerik:RadGrid 表格中删除数据

    <telerik:RadGrid OnItemCommand=" Height="490px" Culture="zh-CN" CssClass ...

  9. 执行js-----Selenium快速入门(十四)

    Selenium能够执行js,这使得Selenium拥有更为强大的能力.既然能执行js,那么js能做的事,Selenium应该大部分也能做.这应该得益于JavascriptExecutor这个接口,而 ...

  10. VUE.js 中取得后台原生HTML字符串 原样显示问题

    今天使用vue调试页面,发现了页面上的一个问题,后台数据传过来的HTML字符串并没有被转换为正常的HTML代码,一拍脑门,发现忘记转换了,于是满心欢喜加上了{{{}}}.但是之后构建发现报错: 为此去 ...