0基础手把手教你搭建webpack运行打包项目(未完待续)
这些天在项目之余的时间学习了webpack打包项目的东西,非常荣幸的找到一些大神的文章来学习,死劲嚼了几天,终于略知一二。在以后的工作上还需继续学习,下面我将分享我这几天学到的一点东西,希望能让我一个还不算入门webpack的小白领大家入门。本文主要还是摘抄大神的文章加上自己手动的一些过程记录,不喜勿喷,谢谢!开车了!!!开车了!!!
一、什么是Webpack
webpack 是一个现代 JavaScript 应用程序的模块打包器(module bundler)。当 webpack 处理应用程序时,它会递归地构建一个依赖关系图(dependency graph),其中包含应用程序需要的每个模块,然后将所有这些模块打包成少量的 bundle - 通常只有一个,由浏览器加载。
webpack的工作原理:把你的项目当做一个整体,通过一个给定的主文件(如:index.js),Webpack将从这个文件开始找到你的项目的所有依赖文件,使用loaders处理它们,最后打包为一个(或多个)浏览器可识别的JavaScript文件。
二、webpack的使用
1、项目初始化
webpack安装完成后,我们紧接着输入命令来初始化项目,初始化命令:npm init; 在初始化的过程中,终端会问你一系列诸如项目名称,项目描述,作者等信息,不过不用担心,如果你不准备在npm中发布你的模块,这些问题的答案都不重要,回车默认即可。
这时候,目录中会生成一个package.json文件,这是一个标准的npm说明文件,里面蕴含了丰富的信息,包括当前项目的依赖模块,自定义的脚本任务等等。
2、安装webpack
新建一个项目目录,打开终端进入新建的目录输入命令安装webpack:
全局安装:npm inatsll webpack -g; 跟随目录安装:npm inatsll --save-dev webpack;
3、项目构建
在根目录新建app和public两个目录与及一个配置文件webpack.config.js,app文件夹用来存放原始数据和我们将写的JavaScript模块,public文件夹用来存放之后供浏览器读取的文件(包括使用webpack打包生成的js文件以及一个index.html
文件),接着我们在app目录下分别新增main.js文件和project.js文件,在public目录下新增index.html文件。
目录结构如图所示:
下面我们看看每个文件的代码,与及运行的一些过程结果:
index.html文件:
main.js 文件:
project.js文件:
webpack.config.js文件:这里的配置是指定main.js文件是我们唯一的入口文件,而bundle.js文件是我们打包后输出的文件名,与及我们打包后存放的路径。
置于entry和output这写webpack的属性词代表什么,我在这里就不做解释了,可以去webpack中文文档学习,链接:https://doc.webpack-china.org/concepts/
package.json文件:
各文件配置好后,我们在命令行输入:npm start, 这是项目就开始打包文件了:
我们可以看到webpack把我们的main.js文件和project.js文件进行了编译,编译完成后我们可以发现在public目录下自动生成了一个编译后的bubundle.js文件。然后我们就可以在浏览器打开我们的index.html文件了,并且能正常打开。如图所示:
恭喜你,现在你已经学会了webpack最基础的打包方式。
三、稍微的进阶一下
1、使用webpack构建本地服务
构建本地服务之后,浏览器会监听你代码的修改,并且自动刷新更改的结果。接下来我们就安装这个依赖包,
服务依赖包:npm install --save-dev webpack-dev-server, devserver作为webpack配置选项中的一项,以下是它的一些配置选项,更多配置可参考
把这些命令加到webpack的配置文件中,现在的配置文件webpack.config.js
如下所示
注意了哈,package.json这里配置有个小细节,就是我们平时run代码的时候大多数是输入:npm run dev, 那是因为在package.json里面配置了如图所示:
如果用默认的server来配置的话,run项目时直接输入:run server, 即可。另外,当我们的port属性不设置时,默认的端口号是:8080,但是上面我们改为8088了,如图所示:
2、Loaders的安装和配置
Loaders
是webpack
提供的最激动人心的功能之一了。通过使用不同的loader
,webpack
有能力调用外部的脚本或工具,实现对不同格式的文件的处理,比如说分析转换scss为css,或者把下一代的JS文件(ES6,ES7)转换为现代浏览器兼容的JS文件。
Loaders需要单独安装并且需要在webpack.config.js
中的modules
关键字下进行配置,Loaders的配置包括以下几方面:
test
:一个用以匹配loaders所处理文件的拓展名的正则表达式(必须)loader
:loader的名称(必须)include/exclude
:手动添加必须处理的文件(文件夹)或屏蔽不需要处理的文件(文件夹)(可选);query
:为loaders提供额外的设置选项(可选)
3、babel的配置
Babel其实是一个编译JavaScript的平台,它的强大之处表现在可以通过编译帮你达到以下目的:
- 使用下一代的JavaScript代码(ES6,ES7...),即使这些标准目前并未被当前的浏览器完全的支持;
- 使用基于JavaScript进行了拓展的语言;
Babel的安装与配置
Babel其实是几个模块化的包,其核心功能位于称为babel-core
的npm包中,webpack可以把其不同的包整合在一起使用,对于每一个你需要的功能或拓展,你都需要安装单独的包(用得最多的是解析Es6的babel-preset-es2015
包)。
安装babel依赖:npm install --save-dev babel-core babel-loader babel-preset-es2015 (这里是连续安装了好几个依赖包),下面我们进行配置,代码如图所示
0基础手把手教你搭建webpack运行打包项目(未完待续)的更多相关文章
- 零基础 Vue 开发环境搭建 打开运行Vue项目
[相关推荐]IntellIJ IDEA 配置 Vue 支持 打开Vue项目 所需文件 node.js环境(npm包管理器)(node-v8.11.3-x64.msi)(npmV5.6.0) cnpm ...
- Neutron server的运行原理(未完待续)
1.Neutron server首先是一个web server, 对于http和https协议的报文进行响应. 2.Neutron server进程里面包含了一个WSGI 应用程序,以及不同模块的pl ...
- java泛型基础、子类泛型不能转换成父类泛型--未完待续
参考http://how2j.cn/k/generic/generic-generic/373.html 1.使用泛型的好处:泛型的用法是在容器后面添加<Type>Type可以是类,抽象类 ...
- 每天记录一点:NetCore获得配置文件 appsettings.json vue-router页面传值及接收值 详解webpack + vue + node 打造单页面(入门篇) 30分钟手把手教你学webpack实战 vue.js+webpack模块管理及组件开发
每天记录一点:NetCore获得配置文件 appsettings.json 用NetCore做项目如果用EF ORM在网上有很多的配置连接字符串,读取以及使用方法 由于很多朋友用的其他ORM如S ...
- 庐山真面目之十一微服务架构手把手教你搭建基于Jenkins的企业级CI/CD环境
庐山真面目之十一微服务架构手把手教你搭建基于Jenkins的企业级CI/CD环境 一.介绍 说起微服务架构来,有一个环节是少不了的,那就是CI/CD持续集成的环境.当然,搭建CI/CD环境的工具很多, ...
- 大数据江湖之即席查询与分析(下篇)--手把手教你搭建即席查询与分析Demo
上篇小弟分享了几个“即席查询与分析”的典型案例,引起了不少共鸣,好多小伙伴迫不及待地追问我们:说好的“手把手教你搭建即席查询与分析Demo”啥时候能出?说到就得做到,差啥不能差人品,本篇只分享技术干货 ...
- 手把手教你搭建Pytest+Allure2.X环境详细教程,生成让你一见钟情的测试报告(非常详细,非常实用)
简介 宏哥之前在做接口自动化的时候,用的测试报告是HTMLTestRunner,虽说自定义模板后能满足基本诉求,但是仍显得不够档次,高端,大气,遂想用其他优秀的report框架替换之.一次偶然的机会, ...
- 手把手教你搭建 ELK 实时日志分析平台
本篇文章主要是手把手教你搭建 ELK 实时日志分析平台,那么,ELK 到底是什么呢? ELK 是三个开源项目的首字母缩写,这三个项目分别是:Elasticsearch.Logstash 和 Kiban ...
- 手把手教你搭建自己的Angular组件库 - DevUI
摘要:DevUI 是一款面向企业中后台产品的开源前端解决方案,它倡导沉浸.灵活.至简的设计价值观,提倡设计者为真实的需求服务,为多数人的设计,拒绝哗众取宠.取悦眼球的设计.如果你正在开发 ToB 的工 ...
随机推荐
- 删除一个大表导致其他表Opening tables
- 一道变态的Javascript面试题
转载http://cymoft.blog.51cto.com/324099/1260099 1 2 3 4 5 6 7 8 9 f = function() {return true;}; g = ...
- javascript面向对象编程(OOP)——汇总
目录 一.JS的解析与执行过程 预处理阶段 执行阶段 二.作用域 块作用域 函数作用域 动态作用域 词法作用域 三.闭包 什么是闭包 闭包的好处 四.类与对象 对象 类 原型(prototype) t ...
- Listview嵌套Listview
今天做项目,打算模仿淘宝的订单管理,需要Listview嵌套Listview,都是两个控件都是沿着一个方向滑动的,嵌套在一起不幸福,以下是解决方案,打个笔记,以后估计还得用: 其中onMeasure函 ...
- excel vlookup
今天在百度知道的时候,看到旁边有人问excel中条件查找vlookup的问题,有几位高手都知道使用vlookup作答,可惜都是没有经过测试,直接复制别人的答案,让所有的读者都无法实施,一头雾水.今天我 ...
- 例题:填词-poj
问题描述 Alex喜欢填词游戏.填词游戏是一个非常简单的游戏.填词游戏包括一个N X M大小的矩形方格盘和P个单词.玩家需要把每个方格中填上一个字母使得每个单词都能在方格盘上被找到.每个单词都能被找到 ...
- 自己动手编写IOC框架(四)
终于到了激动人心的时刻了,首先感谢小伙伴们的阅读,如果能多点评论,多点探讨就更好了,没有交流让我觉得我写的东西只有标题有点价值,内容只是在浪费大家的时间.为了泪滴下周能写下一个框架orm,请小伙伴们能 ...
- c++ 中 pair 的 使用方法
原转载地址:点击打开链接 pair的类型: pair 是 一种模版类型.每个pair 可以存储两个值.这两种值无限制.也可以将自己写的struct的对象放进去.. pair<string,int ...
- 使用echarts,制作色温图
1.需要下载echarts的echarts-all.js文件和创建地图需要用到的数据源 2.在项目中创建jsp文件,将js文件引入 <script type="text/javascr ...
- 三种方法实现PCA算法(Python)
主成分分析,即Principal Component Analysis(PCA),是多元统计中的重要内容,也广泛应用于机器学习和其它领域.它的主要作用是对高维数据进行降维.PCA把原先的n个特征用数目 ...