继续之前请确认你已经安装了nodejs

安装、初始化:

然后找个目录新建名为webpack-demo的文件夹,然后在命令行下进入该目录,执行以下命令:

npm init -y
npm install --save-dev webpack

一个初始化命令,会在当前目录下生成一个package.json的配置文件

一个本地安装webpack的命令

目录内的结构如下:(以/开头的为目录)

webpack-demo
|- package.json
+ |- index.html
+ |- /src
+ |- index.js

接下来在src/index.js中写一个测试方法:

function component() {
var element = document.createElement('div');
// Lodash, currently included via a script, is required for this line to work
element.innerHTML = _.join(['Hello', 'webpack'], ' ');
return element;
}
document.body.appendChild(component());

不解释了,会点js应该都可以看懂

index.html的内容如下:

<html>
<head>
<title>Getting Started</title>
<script src="https://unpkg.com/lodash@4.16.6"></script>
</head>
<body>
<script src="./src/index.js"></script>
</body>
</html>

没什么特别的,引用了lodash库和我们自己写的index.js文件(此时还没有用webpack来管理依赖,所以我们

通过script标签来自己导入需要的库文件)。

到此为止就写完了,运行一下html文件,应该没什么意外,你应该可以看到页面上有个DIV,DIV的内容是:

Hello webpack

这种方式其实也是我较早时候写js的方式,需要什么库,自己写或者自己去下载,然后通过script标签引用

这种方式有如下几个缺点:

  • 需要在html文件显示引入依赖脚本
  • 如果依赖丢失或者引入顺序错误,会早晨程序运行错误
  • 如果导入依赖库,但是没使用到。浏览器依然会加载这个库,造成请求流量增大,延缓页面加载速度

使用webpack改造:

基于上述三个缺点,使用webpack来改造之前的项目:

改造后的目录结构如下:

  webpack-demo
|- package.json
+ |- /dist
+ |- index.html
- |- index.html
|- /src
|- index.js
其中蓝色标注的为新加的目录和文件,红色标注的为删除掉的文件
也就是删掉了之前webpack-demo目录下的index.html,新建了dist目录,并在该目录下新建index.html
刚才在页面中引入了lodash库(我们先不管它干嘛用的,主要目的是webpack),现在在命令行中,
首先定位webpack-demo目录下,然后执行:
npm install --save lodash
此命令将lodash安装在本地,接着修改src目录下的index.js文件修改后的js如下:
import _ from 'lodash';

function component() {
var element = document.createElement('div');
element.innerHTML = _.join(['Hello', 'webpack'], ' ');
return element;
}
document.body.appendChild(component());

和刚开始的比较,第一行多了一个import导入语句,把lodash导入为 _变量,下边就能直接使用了

至于lodash哪来的?为什么能导入,看上边npm install那行在干嘛?不就是在安装lodash吗,安装了当然能导入。

最后修改dist文件夹下的index.html,内容为:

<html>
<head>
<title>Getting Started</title>
</head>
<body>
<script src="bundle.js"></script>
</body>
</html>

相比于之前的index.html,这里少了lodash的script引用标签,而且连我们自己写的index.js文件的引入都没有了

但是多了一个bundle.js,这是什么?哪里来的。不要着急,会明白的,先往下走

在本文开头你执行npm install --save-dev执行本地安装的时候,如果你留意一下,会看到当前目录下生成了

一个文件夹叫做:node_modules,打开可以看到N多的文件夹和文件, 我们的项目依赖可以在这里找到

所以我们安装的webpack也在这里,现在代码写好了,让我们使用webpack来执行打包:

./node_modules/.bin/webpack src/index.js dist/bundle.js

这句话的意思是调用当前目录下的node_modules目录下的bin目录下的webpack命令,webpack后边的就是命令参数了

大概意思就是打包src目录下的index.js文件到dist目录下,打包后的文件为bundle.js,就是这个意思了。

所以现在想想,index.html里引入的bundle.js哪来的?就是这里了,引入webpack打包后的文件。

如果你执行这个命令报错比如command not found,请确认两点,第一webpack安装成功了没有

第二,看看你当前所在目录,路径对不对

如果没什么问题,稍等片刻你应该在控制台会看到类似这样的输出:

Hash: ff6c1d39b26f89b3b7bb
Version: webpack 3.1.4
Time: 385ms
Asset Size Chunks Chunk Names
bundle.js 544 kB 0 [emitted] [big] main
[0] ./~/lodash/lodash.js 540 kB {0} [built]
[1] (webpack)/buildin/global.js 509 bytes {0} [built]
[2] (webpack)/buildin/module.js 517 bytes {0} [built]
[3] ./src/index.js 278 bytes {0} [built]

好了,如果你看到了这个,那么恭喜你,你的首个webpack打包已经成功了。马上来看看吧

打开dist下的index.html文件,你应该能看到和之前一样的效果,页面显示:Hello webpack

使用配置文件:

刚才打包我们输入了一长串的命令,容易错,还不好记,有没有什么办法能简化一下?

有的,就是使用配置文件,再次改造一下,在webpack-demo目录下新建webpack.config.js

内容如下:

const path = require('path');

module.exports = {
entry: './src/index.js',
output: {
filename: 'bundle.js',
path: path.resolve(__dirname, 'dist')
}
};

保存文件,然后控制台执行:

./node_modules/.bin/webpack --config webpack.config.js

会发现打包依然成功了,和之前的打包效果一样,不过这次我们没有指定打包的文件和打包后的存放路径这些

这些通过配置放在了webpack.config.js中。

entry指定了打包的入口文件,output指定了打包后的相关参数,filename是打包后的文件名,path是打包后的存放路径

上边的命令其实还能简化,可以直接输入:

./node_modules/.bin/webpack

也能打包成功,因为webpack打包默认会寻找一个名webpack.config.js的文件,所以不需要显示指定,之所以使用--config参数

是想说明如果我们自定义配置文件不叫默认的名字:webpack.config.js,那么可以通过--config 自定义文件名的形式来打包。

再次简化,使用npm脚本:

现在第一个webpack程序已经跑起来了,但是如果你是个合格的程序员,你会想,我X,这么麻烦

每次打包还要命令行输入命令?还要指定打包文件?还要指定打包后的文件和目录.....,简直不能忍

所以我们来简化一下,当个合格的程序员(懒):

我们在开头时执行了npm init这个命令,当时说了会生成一个package.json,到现在还没用上呢,现在就来用用

{
"scripts": {
"build": "webpack"
}
}

在scripts下加上"build": "webpack"的字样,就可以了,意思就是新建了一个脚本命令,名字为build,对应要执行的命令为webpack

好了,就这么简单,保存一下,然后回到我们的webpack-demo目录下,执行npm run build看看效果吧,如果你跟着一路坐下来,

应该能看到上面打包成功的那些信息。

这里其实就是用一个名字为build的脚本命令代替了./node_modules./bin/webpack......这一长串的命令。

到此为止,下一篇:资源管理

 

webpack快速入门(二):使用入门的更多相关文章

  1. redis入门(二)

    目录 redis入门(二) 前言 持久化 RDB AOF 持久化文件加载 高可用 哨兵 流程 安装部署 配置技巧 集群 原理 集群搭建 参考文档 redis入门(二) 前言 在redis入门(一)简单 ...

  2. webpack快速入门——实战技巧:优雅打包第三方类库

    下面说两种方法: 一. 1.引入jQuery,首先安装: cnpm install --save jquery 2.安装好后,在我们的entry.js中引入: import $ from 'jquer ...

  3. webpack快速入门——实战技巧:watch的正确使用方法,webpack自动打包

    随着项目大了,后端与前端联调,我们不需要每一次都去打包,这样特别麻烦,我们希望的场景是,每次按保存键,webpack自动为我们打包,这个工具就是watch! 因为watch是webpack自带的插件, ...

  4. webpack快速入门——CSS进阶:自动处理CSS3前缀

    为了浏览器的兼容性,有时候我们必须加入-webkit,-ms,-o,-moz这些前缀.目的就是让我们写的页面在每个浏览器中都可以顺利运行. 1.安装 cnpm i postcss-loader aut ...

  5. webpack快速入门——如何安装webpack及注意事项

    1.window+R键,输入cmd打开命令行工具,输入 mkdir XXXX(XX:文件夹名): 2.cd XXX 进入刚刚创建好的文件夹里,输入cnpm install -g webpack (安装 ...

  6. webpack快速入门——webpack3.X 快速上手一个Demo

    1.进入根目录,建两个文件夹,分别为src和dist 1).src文件夹:用来存放我们编写的javascript代码,可以简单的理解为用JavaScript编写的模块. 2).dist文件夹:用来存放 ...

  7. webpack快速入门——配置文件:入口和出口,多入口、多出口配置

    1.在根目录新建一个webpack.config.js文件,然后开始配置: const path = require('path'); module.exports={ //入口文件的配置项 entr ...

  8. webpack快速入门——配置文件:服务和热更新

    1.在终端安装 cnpm i webpack-dev-server --save-dev 2.配置好后执行 webpack-dev-server,这时候会报错 出现错误,只需要在pagejson里配置 ...

  9. webpack快速入门——CSS文件打包

    1.在src下新建css文件,在css文件下新建index.css文件,输入以下代码 body{ background:pink; color:yellowgreen; } 2.css建立好后,需要引 ...

  10. webpack快速入门——配置JS压缩,打包

    1 .首先在webpack.config.js中引入 const uglify = require('uglifyjs-webpack-plugin'); 2.然后在plugins配置里 plugin ...

随机推荐

  1. .net 获取客户端Ip地址

    Request.ServerVariables["REMOTE_ADDR"]来取得客户端的IP地址,但如果客户端是使用代理服务器来访问,那取到的就是代理服务器的IP地址,而不是真正 ...

  2. 创建python3.6的虚拟开发环境virtualenv

    为了保证各个项目环境和插件的相对独立,使用virtualenv作为python的虚拟运行环境,这样在项目维护方面,减少在依赖包上所花费的时间. 1.安装 virtualenv虚拟环境插件 pip in ...

  3. 个人Blog小程序开发完毕

    今天忙了一天,算是把这个小程序弄好了,包括小程序前端页面.接口对接.后台系统.服务器架 设.域名备案.证书安装(现在阿里云的免费证书怎么审核要这么久啊,到现在还在审核中) 先上截图: 这个背景图片的替 ...

  4. 使用kibana来进行ElasticSearch的信息查询检索

    大家经常会听到使用ELK搭建日志管理平台.完成日志聚合检索的功能,那么这个平台到底是个什么概念,怎么搭建,怎么使用呢? ELK包括ElasticSearch(数据存储.快速查询).logstash(日 ...

  5. iOS - 正则表达式判断邮箱、身份证,车牌,URL等..是否正确:

    //邮箱 + (BOOL) validateEmail:(NSString *)email { NSString *emailRegex = @"[A-Z0-9a-z._%+-]+@[A-Z ...

  6. 常见Git操作及关键知识点

    一.Git三区概念 工作区 (work dict) 暂存区(stage)(add 是添加到当前的暂存区) 提交区(就是当前工作的分支master分支或者branches分支) git 所有操作都是基于 ...

  7. 关于Django的core first 、db first

    db first 根据数据库的表生成类 django : python manage.py inspectdb code first 根据类创建数据库表: django: python manage. ...

  8. 为Linux服务器的SSH登录启用Google两步验证

    对于Linux服务器而言使用密钥登录要比使用密码登录安全的多,毕竟当前网上存在多个脚本到处进行爆破. 这类脚本都是通过扫描IP端的开放端口并使用常见的密码进行登录尝试,因此修改端口号也是非常有必要的. ...

  9. matlab下kmeans及pam算法对球型数据分类练习

    clear all; clc; %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%% %数据初始化 D ...

  10. quick2.2.6 问题记录

    1.luasocket 不能使用方式 用下面地址的文件替换文件重新编译 https://github.com/chukong/quick-cocos2d-x/blob/master/lib/cocos ...