您的位置：首页 > Web前端 > Webpack

webpack3.X 学习day1 （简单的Demo）

2018-01-09 11:22 197 查看
摘要: 学习地址视频地址 http://jspang.com/2017/09/16/webpack3-2/
学习视频 (跟着视频持续学习)

1.认识Webpack

什么是WebPack？

WebPack可以看做是模块打包机：它做的事情是，分析你的项目结构，找到JavaScript模块以及其它的一些浏览器不能直接运行的拓展语言（Sass，TypeScript等），并将其转换和打包为合适的格式供浏览器使用。在3.0出现后，Webpack还肩负起了优化项目的责任。

打包：可以把多个Javascript文件打包成一个文件，减少服务器压力和下载带宽。

转换：把拓展语言转换成为普通的JavaScript，让浏览器顺利运行。

优化：前端变的越来越复杂后，性能也会遇到问题，而WebPack也开始肩负起了优化和提升性能的责任。

查看Webpack文档

对于大多数项目，我们建议本地安装。这可以使我们在引入破坏式变更(breaking change)的依赖时，更容易分别升级项目。

2.创建Webpack项目

2.1 新建文件夹【项目名建议使用小写字母，并且不带空格，不能含有大写字母】

2.2 安装 Webpack,Webpack 可以使用 npm 安装,先安装npm，不确定是否安装npm【npm -v】查看

2.2.1 npm升级【npm install -g npm】(可不升级)

2.2.2 项目目录下安装Webpack【npm install --save-dev webpack】(我使用的是局部安装)

(1) 查看版本号【webpack -v】；你会发现报错（webpack：command not found）；

原因，因为局部安装，webpack为全局无法使用，若想要使用需要配置【package.json文件】，配置费方式如图 添加（"start":"webpack"）



运行时，使用 npm start

tip：具体可看这个页面 我是链接

package.json的形成

tip:在用npm安装前，我们先要进行一下初始化，初始化的主要目的是生成package.json文件（这是一个标准的npm说明文件，里面蕴含了丰富的信息，包括当前项目的依赖模块，自定义的脚本任务等等，如果你对此文件还不了解，可以看看node 的相关知识）。

在命令行输入

[npm init]

输入完成后，npm终端会问你关于项目的名称，描述……一堆内容，如果你不考虑发布到npm上，这些内容都不重要，而且我们后期还可以用文本的形式修改这些内容。现在我们只要一路回车就完成了初始化。这时用dir命令已经可以看到生成的package.json文件了。

2.3建立程序文件

建立两个文件夹，分别是src文件夹和dist文件夹：

src文件夹：用来存放我们编写的javascript代码，可以简单的理解为用JavaScript编写的模块。

dist文件夹：用来存放供浏览器读取的文件，这个是webpack打包成的文件。

/dist/index.html

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>jspang webpack</title>
</head>
<body>
<div id="title"></div>
<script src="./bundle.js"></script>
</body>
</html>

这里引入了一个JavaScript的bundle.js文件。这个文件现在还没有，这是用webpack执行打包命令后生产的文件。我们的index.html写好后，接下来在src文件夹下建立entery.js的文件，用于编写我们的JavaScript代码，也是我们的入口文件。

src/entry.js

document.getElementById('title').innerHTML='Hello';

这个文件的代码很简单，就是在<div id=”title”></div>标签里写入Hello Webpack这句话。

*******************激动人心的时刻到了******************

第一次Webpack打包

Webpack其实是可以在终端（命令行）中使用的，基本使用方法如下：

webpack {entry file} {destination for bundled file}


{entry file}:入口文件的路径，本文中就是src/entery.js的路径；

{destination for bundled file}:填写打包后存放的路径。

注意：在命令行中是不需要写{ }的。

终端执行命令如下：

npm start src/entry.js dist/bundle.js

命令执行成功后，会在dist目录下出现bundle.js文件，这时我们就可以在浏览器中预览结果了，网页中显示出了Hello Webpack的信息。

*******撒花/撒花*******成功

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签：  webpack3.x
相关文章推荐
新的分享
章节导航