继续之前请确认你已经安装了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. linux安装vmware出现Gtk-Message: Failed to load module pk-gtk-module canberra-gtk-module的解决方法

    使用此方法正确解决了问题, 文章地址如下: http://ian.wang/129.htm 为了防止以后看不到,特截图如下,希望博主不要怪罪.

  2. C#项目中怎样创建和使用类和类库

    创建一个类库项目在“文件”菜单上,选择“新建项目”. 在“新建项目”对话框的“模板”窗格中,单击“类库”. 在“名称”框中键入 Persons,再单击“确定”. 把“添加新解决方案”勾选掉,选择“添入 ...

  3. 我也说说Emacs吧(3) - 文件基本操作

    Spacemacs文件基本操作 有了前两讲的积累,我们知道了: 1. 我们既要学习emacs的操作,也要学习vi的操作 2. emacs是一个可扩展的平台,我们并不是从头配置,而是使用一套成熟的集成方 ...

  4. 如何从github下载项目的源代码，包含git客户端，直接下载，vs下载

    有好多小伙伴可能刚刚接触github,还不知道如果和github下载项目,此处写个博客统一的声明.从多种方式下载源代码,加深对git的理解. 首先先解释下git的含义,git是一个源代码的管理工具,通 ...

  5. 用sublime server 启动本地服务器（手机访问电脑页面）

    安装sublime server 插件包           1.Ctrl + shift + p                      install package               ...

  6. rest-framework框架 -- 认证权限流程源码

    认证权限 解析BaseAuthentication源码 # 做认证权限 from rest_framework import exceptions from ..models import * cla ...

  7. 观后感 - 从MVC到前后端分离

    今天读了篇文章 从MVC到前后端分离,讲了 前后端分离的 JAVA实现,读了前面几段就发现 自己 就有这种想法,蛮有意思的,打算研究下在PHP上的实现和应用

  8. 读《the facebook effect》

    现在觉得时间越来越少,特别是抽出时间读书都感觉是一种奢侈. 今天把facebook读完了,想记录下自己的体会.不知该从什么地方写起.以前,曾注册过一个facebook帐号,一直没登过,好像从那时起,f ...

  9. SpringDataJpa增删改查

    资料来源网址:http://www.cnblogs.com/hawell/p/SpringDataJpa.html Repository(几个常用的例子) @Repository public int ...

  10. JPA级联（一对一 一对多 多对多）注解【实际项目中摘取的】并非自己实际应用

    下面把项目中的用户类中有个:一对一  一对多  多对多的注解对应关系列取出来用于学习      说明:项目运行正常 问题类:一对多.一对一.多对多 ============一对多 一方的设置 @One ...