逗渣的学习笔记-关于webpack从头撸一遍
刚开始接触webpack,完全是工作需求。那是去年年末的事情了,当时被迫换到另一个项目组,也是一个新的项目,做手机上面的应用,客户要求用react做应用,所以完全属于赶鸭子上架,当时说真的蛮懵逼的,也就是从那个时候开始接触node,webpack,react。
我现在终于有时间重新看待重新学习和总结webpack,直到前两天看到一篇文章,我才如梦初醒,附送链接地址:http://www.jianshu.com/p/42e11515c10f。写这篇文章的楼主是去年写的文章,我前两天才开始慢慢看,真是惭愧。在这里,由衷感谢分享自己学习心得的楼主,让我对webpack有了比较完整的认识。
webpack,最开始我用搜索引擎去搜,看到的最直接的词汇,就是“打包”,就是把所有不同的文件模块,通过webpack这个东西进行模块化的打包,把浏览器不能识别的语言解析成浏览器能够识别的语言。
作为逗渣的我,实在上升不了多高的高度,所以本文章完全是讲webpack的使用以及一些小点的释疑。本文的操作,完全在node环境下,所以前提是node的环境已经配置好。
首先,新建一个空的文件夹,我命名为new-webpack,当然小伙伴们可以命名为其他名称,请自便。
用windows键+R打开电脑运行命令的窗口,也就是终端。
点击“确定”,显示如下:
我的new-webpack文件夹是放在D盘下的myspace中,所以我们接下来就通过命令行进入:
大家也看到,我们刚开始打开终端,默认的路径是C盘下的管理员目录,我们通过输入“D:”切换到D盘,那么怎么找到new-webpack的路径呢?
对,通过这样,cd在终端里是切换的意思,所以我们输入“cd D:\myspace\new-webpack”,就进入我们new-webpack文件夹了。
在new-webpack文件夹中,我们创建一个package.json的文件,这是一个标准的npm说明文件,里面包含很多信息,栗如项目名称,版本,描述,项目入口,依赖关系等等。在终端里我们输入"npm init"命令就可以自动创建package.json文件,输入命令后,终端会询问一系列问题,比如项目名称,版本,描述,作者等,我们只要一路回车就好,这些问题答案都不是那么重要。
npm init
打开package.json,可以看到以下信息:
接下来进入正题。首先我们要安装webpack,通过以下两种方式进行安装,“-g”是全局安装的意思,“--save-dev”是安装到你当前的项目目录里。
//全局安装
npm install webpack -g
//安装到你的项目目录
npm install webpack --save-dev
我是安装webpack2.2.1版本,因为某些客观的原因,不能安装新版本,~~~~(>_<)~~~~安装完的结果如下:
全局安装完之后,接下来给本项目安装webpack依赖关系,如下:
// 安装Webpack
npm install --save-dev webpack
然后我们在package.json里面可以看到:
在我们的new-webpack也能看到,node-modules模块也生成了:
回到之前的空文件夹,并在里面创建两个文件夹,app文件夹和public文件夹,app文件夹用来存放原始数据和我们将写的JavaScript模块,public文件夹用来存放准备给浏览器读取的数据(包括使用webpack生成的打包后的js文件以及一个index.html文件)。在这里还需要创建三个文件,index.html 文件放在public文件夹中,两个js文件(Greeter.js和main.js)放在app文件夹中,此时项目结构如下图所示
index.html文件只有最基础的html代码,它唯一的目的就是加载打包后的js文件(bundle.js)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Webpack Sample Project</title>
</head>
<body>
<div id='root'>
</div>
<script src="bundle.js"></script>
</body>
</html>
Greeter.js只包括一个用来返回包含问候信息的html元素的函数。
module.exports = function() {
var greet = document.createElement('div');
greet.textContent = "Hi there and greetings!";
return greet;
};
main.js用来把Greeter模块返回的节点插入页面。
var greeter = require('./Greeter.js');
document.getElementById('root').appendChild(greeter());
在当前练习文件夹的根目录下新建一个名为webpack.config.js的文件,并在其中进行最最简单的配置,如下所示,它包含入口文件路径和存放打包后文件的地方的路径。
module.exports = {
entry: __dirname + "/app/main.js",//入口文件
output: {
path: __dirname + "/public",//打包后的文件存放的地方
filename: "bundle.js"//打包后输出文件的文件名
}
}
注:“__dirname”是node.js中的一个全局变量,它指向当前执行脚本所在的目录。
然后在终端输入命令:webpack
显示如下:
打包成功,并且在public的文件夹下面生成了bundle.js文件。然后我们用浏览器打开index.html,就能看到结果了。
Loaders是webpack中最让人激动人心的功能之一了。通过使用不同的loader,webpack通过调用外部的脚本或工具可以对各种各样的格式的文件进行处理,比如说分析JSON文件并把它转换为JavaScript文件,或者说把下一代的JS文件(ES6,ES7)转换为现代浏览器可以识别的JS文件。或者说对React的开发而言,合适的Loaders可以把React的JSX文件转换为JS文件。
Loaders需要单独安装并且需要在webpack.config.js下的modules
关键字下进行配置,Loaders的配置选项包括以下几方面:
test
:一个匹配loaders所处理的文件的拓展名的正则表达式(必须)loader
:loader的名称(必须)include/exclude
:手动添加必须处理的文件(文件夹)或屏蔽不需要处理的文件(文件夹)(可选);query
:为loaders提供额外的设置选项(可选)
继续上面的例子,我们把Greeter.js里的问候消息放在一个单独的JSON文件里,并通过合适的配置使Greeter.js可以读取该JSON文件的值,配置方法如下,在终端继续安装json-loader
//安装可以装换JSON的loader
npm install json-loader --save-dev
然后我们在webpack.config.js中配置JSON loader
module.exports = {
entry: __dirname + "/app/main.js",
output: {
path: __dirname + "/public",
filename: "bundle.js"
}, module: {
loaders: [
{
test: /\.json$/,
loader: "json-loader"
}
]
}
}
我们在app文件夹下面创建config.json文件,内容如下:
{
"greetText": "Hi there and greetings from JSON!"
}
注:json文件不要含有注释内容,否则会造成打包不成功,报错。。。
更新Greeter.js
var config = require('./config.json'); module.exports = function() {
var greet = document.createElement('div');
greet.textContent = config.greetText;
return greet;
};
继续在终端输入webpack命令打包,终端结果显示:
浏览器结果显示:
Loaders很好,不过有的Loaders使用起来比较复杂,比如说Babel。
Babel
Babel其实是一个编译JavaScript的平台,它的强大之处表现在可以通过编译帮你达到以下目的:
- 下一代的JavaScript标准(ES6,ES7),这些标准目前并未被当前的浏览器完全的支持;
- 使用基于JavaScript进行了拓展的语言,比如React的JSX
Babel的安装与配置
Babel其实是几个模块化的包,其核心功能位于称为babel-core
的npm包中,不过webpack把它们整合在一起使用,但是对于每一个你需要的功能或拓展,你都需要安装单独的包(用得最多的是解析Es6的babel-preset-es2015包和解析JSX的babel-preset-react包)。
我们先来一次性安装这些依赖包
// npm一次性安装多个依赖模块,模块之间用空格隔开
npm install --save-dev babel-core babel-loader babel-preset-es2015 babel-preset-react
在webpack中配置Babel的方法如下:
module.exports = {
entry: __dirname + "/app/main.js",
output: {
path: __dirname + "/public",
filename: "bundle.js"
}, module: {
loaders: [
{
test: /\.json$/,
loader: "json"
},
{
test: /\.js$/,
exclude: /node_modules/,
loader: 'babel',//在webpack的module部分的loaders里进行配置即可
query: {
presets: ['es2015','react']
}
}
]
}
}
现在你的webpack的配置已经允许你使用ES6以及JSX的语法了。继续用上面的例子进行测试,不过这次我们会使用React,记得先安装 React 和 React-DOM
npm install --save react react-dom
使用ES6的语法,更新Greeter.js并返回一个React组件
import React, {Component} from 'react'
import config from './config.json'; class Greeter extends Component{
render() {
return (
<div>
{config.greetText}
</div>
);
}
} export default Greeter
使用ES6的模块定义和渲染Greeter模块
import React from 'react';
import {render} from 'react-dom';
import Greeter from './Greeter'; render(<Greeter />, document.getElementById('root'));
继续webpack打包,然后结果我们也能看到。
这中间有很多我的废话,也有很多http://www.jianshu.com/p/42e11515c10f这篇文章的知识点,鉴于我语文不好,实在说不了楼主的精辟语言,所以重点知识点都是照搬楼主的,大家可以去看这篇文章。我的介绍就到这里,楼主那篇文章还有其他知识点可以学习,欢迎大家去看那篇文章,那篇文章打开了我认识webpack的大门,非常棒的一篇文章。
参考资料:简书
http://www.jianshu.com/p/42e11515c10f
逗渣的学习笔记-关于webpack从头撸一遍的更多相关文章
- js学习笔记:webpack基础入门(一)
之前听说过webpack,今天想正式的接触一下,先跟着webpack的官方用户指南走: 在这里有: 如何安装webpack 如何使用webpack 如何使用loader 如何使用webpack的开发者 ...
- Vue学习笔记之Webpack介绍
在这里我仅仅的是对webpack做个讲解,webpack这个工具非常强大,解决了我们前端很繁琐的一些工具流程繁琐的事情.如果感兴趣的同学,简易还是看官网吧. 中文链接地址:https://www.we ...
- Webpack学习笔记九 webpack优化总结
webpack 优化笔记 webpack4 自带的优化包括 swingTree(摇摆树)和作用域提升 swingTree 比如入口文件 index.js引入通用方法 util, 里面有 10个方法, ...
- 学习笔记:webpack深入与实践(一)
一.webpack基本介绍 webpack 是一个现代 JavaScript 应用程序的静态模块打包器(module bundler). 四个核心概念: 入口(entry):指示 webpack 应该 ...
- 学习笔记:webpack
http://wiki.jikexueyuan.com/project/webpack-handbook/ Webpack 中文指南 http://www.itzjt.cc/2017/04/09/we ...
- webpack学习笔记(1)--webpack.config.js
主要的信息都是来自于下方所示的网站 https://webpack.docschina.org/configuration 从 webpack 4.0.0 版本开始,可以不用通过引入一个配置文件打包项 ...
- webpack学习笔记(4)--webpack.config.js
devtool参数 这个参数控制是否生成,以及如何生成source map,已经在官网的doc说明总结了. 下表总结了各个参数和使用的情况 devtool 构建速度 重新构建速度 生产环境 品质(qu ...
- webpack学习笔记(3)--webpack.config.js
module 参数 使用下面的实例来说明 module.exports = { module: { rules: [ { test: /\.css$/, use: 'css-loader' }, { ...
- webpack学习笔记(2)--webpack.config.js
3 模式 mode mode 参数设置为 development(开发模式), production(生产模式) 或 none(无),可以启用对应环境下 webpack 内置的优化.默认值为 prod ...
随机推荐
- java定时任务Timer/scheduleAtFixedRate
Timer类是用来执行任务的类,定时器 scheduleAtFixedRate模式可以用,在这个模式下,Timer会尽量的让任务在一个固定的频率下运行. 参考:http://swiftlet.net/ ...
- sparkStream---1
1.本地scala版 import org.apache.spark._ import org.apache.spark.streaming._ import org.apache.spark.str ...
- Spring事务管理5-----声明式事务管理(3)
声明式事务管理 基于注解 在配置文件中需要开启注解驱动<tx:annotation-driven transaction-manager="transactionManager&qu ...
- windows下node.js安装配置
转自 http://www.cnblogs.com/yzadd/p/6547668.html
- Java使用jxl写入Excel文件
首先添加jxl的maven依赖: <!-- https://mvnrepository.com/artifact/net.sourceforge.jexcelapi/jxl --> < ...
- Bash Shellshock(CVE-2014-6271)破壳漏洞测试
0x01 漏洞原理 Bash使用的环境变量是通过函数名称来调用的,导致漏洞出问题是以"(){"开头定义的环境变量在命令ENV中解析成函数后,Bash执行并未退出,而是继续解析并执行 ...
- windows下配置tomcat服务器的jvm内存大小的两种方式
难得遇到一次java堆内存溢出(心里想着,终于可以来一次jvm性能优化了$$) 先看下报错信息, java.lang.OutOfMemoryError: GC overhead limit excee ...
- idea-配置文件提示红色
Idea建立spring配置文件首行红色 提示URI is not registered 复制出现红色字体的路径...File - Settings - schemas and DtDs 点击加号 ...
- Hadoop 3.1.3伪分布式环境安装Hive 3.1.2的异常总结
背景:hadoop版本为3.1.3, 且以伪分布式形式安装,hive版本为3.1.2,hive为hadoop的一个客户端. 1. 安装简要步骤 (1) 官网下载apache-hive-3.1.2-bi ...
- 10-3 LVM(逻辑卷管理器)
LVM(逻辑卷管理器) 允许对卷进行方便操作的抽象层,包括重新设定文件系统的大小 允许在多个物理设备间重新组织文件系统 将设备指定为物理卷 用一个或者多个物理卷来创建一个卷组 物理卷是用固定大小的物理 ...