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. ECG心电图数据1

    最近在写一篇基于小波变换的ECG信号压缩算法的论文,遇到了怎样获取ECG信号测试数据的问题,在百度和专业论坛里搜索了一番,发现也有很多朋友为此发愁.现在论文写好了,投稿中,顺便也把怎样获取和处理ECG ...

  2. Elasticsearch 健康状态处理

    笔者在自己的 ubuntu 服务器上使用 GET /_cat/health?v 命令时,返回值如下所示 可以看到集群状态为 yellow,这是什么意思呢?原来在 es 的集群状态中,有三种情况,官网描 ...

  3. python实现斐波那契数列笔记

    斐波那契数列即著名的兔子数列:1.1.2.3.5.8.13.21.34.…… 数列特点:该数列从第三项开始,每个数的值为其前两个数之和,用python实现起来很简单: a=0 b=1 while b ...

  4. ASP.NET MVC+Redis (准备工作)

    今天准备更新这个项目的第二篇博客.有一点需要说明的是之前觉得用的是Asp.net的WebPage,经过查看微软的官方文档还有相关的博客,相比较而言使用起来需要安装一个自动工具WebMatrix可以很快 ...

  5. .netcore与vue的学习笔记001

    1.dnc的js引用 需要引用的js文件要放在解决方案下的wwwroot目录下.否则将无法获取到指定js文件,出现404错误 2.vue的相关运用 0)通过new Vue并传入object来实例化一个 ...

  6. wpf ,只能窗口调整高度,并且设定最小值。

    MaxWidth="900" WindowStyle="ToolWindow" ResizeMode="CanResize" WindowS ...

  7. sql service 备份

    declare @SqlBackupDataBase as nvarchar(1000)set @SqlBackupDataBase=N'BACKUP DATABASE YSKJ_Wechat TO ...

  8. 在sqlite中,如何删除字段? how to drop a column in sqlite

    在sqlite中可以使用ALTER TABLE语法对表结构进行修改,从官方的文档说明中,语法如下图: 从图中可以看出,ALTER TABLE仅仅支持表名重命名,添加字段,却没有删除字段的方法.那么该如 ...

  9. 初识面向对象-封装、property装饰器、staticmathod(静态的方法)、classmethod(类方法) (五)

    封装 # class Room:# def __init__(self,name,length,width):# self.__name = name# self.__length = length# ...

  10. jQuery基础笔记(2)

    day54 筛选器 参考:https://www.cnblogs.com/liwenzhou/p/8178806.html#autoid-1-7-5 筛选器方法 下一个元素: $("#id& ...