1.介绍

Webpack 是当下最热门的前端资源模块化管理和打包工具。它可以将许多松散的模块按照依赖和规则打包成符合生产环境部署的前端资源。还可以将按需加载的模块进行代码分隔,等到实际需要的时候再异步加载。通过 loader 的转换,任何形式的资源都可以视作模块,比如 CommonJs 模块、 AMD 模块、 ES6 模块、CSS、图片、 JSON、Coffeescript、 LESS 等。

2.安装

我们需要安装一个node.js , Node.js 自带了软件包管理器 npm,建议使用最新版node.js.

通过npm安装webpack:

$ npm install webpack -g

安装成功后通过 webpack -h 查看帮助

3.使用

我们建立一个项目来使用一下webpack吧!

新建一个demo1文件夹,

通过npm init 创建一个package.json文件:(看不懂的可以一直回车,没什么关系)

我们把webpack安装到当前的项目依赖中:

安装后package.json:

新建一个index.html:

新建一个main.js(根据传统使用helloword!!):

document.write('<h1>Hello World</h1>');

新建一个webpack.config.js:

// webpack.config.js
module.exports = {
entry: './main.js',
output: {
filename: 'bundle.js'
}
};

这个文件的意思是 把main.js文件打包为bundle.js文件。

其中bundle.js文件是Webpack生成出来的,不是我们创建的。

cmd键入命令:

$ webpack

打开index.html就能看到 hello world 了.

webpack也可以将依赖模块打包到一个文件:

新建一个main1文件

// main1.js
document.write('<h1>Hello World</h1>');

更改main.js文件

//main.js
document.write('<h1>Hello World</h1>');
require("./main1.js")

重新打包 可以看到页面

Webpack 会分析入口文件,解析包含依赖关系的各个文件。这些文件(模块)都打包到 bundle.js 。Webpack 会给每个模块分配一个唯一的 id 并通过这个 id 索引和访问模块。在页面启动时,会先执行 入口文件 中的代码,其它模块会在运行 require 的时候再执行。

webpack还可以打包多个入口文件:

在原来项目下新建文件夹,进入文件夹:

新建main1.js main2.js文件:

// main1.js
document.write('<h1>Hello World</h1>'); // main2.js
document.write('<h2>Hello Webpack</h2>');

新建webpack.config.js文件:

//webpack.config.js
module.exports = {
entry: {
bundle1: './main1.js',
bundle2: './main2.js'
},
output: {
filename: '[name].js'
}
}

新建 index.js:

重新打包 可以看到页面。

webpack——简单入门的更多相关文章

  1. js学习笔记:webpack基础入门(一)

    之前听说过webpack,今天想正式的接触一下,先跟着webpack的官方用户指南走: 在这里有: 如何安装webpack 如何使用webpack 如何使用loader 如何使用webpack的开发者 ...

  2. webpack入坑之旅(三)webpack.config入门

    这是一系列文章,此系列所有的练习都存在了我的github仓库中vue-webpack,在本人有了新的理解与认识之后,会对文章有不定时的更正与更新.下面是目前完成的列表: webpack入坑之旅(一)不 ...

  3. vue-cli脚手架搭建项目简单入门一

    搭建系统: Windows系统 简单了解Node.js.npm,安装Node.js,下载网址:http://nodejs.cn/download/ 查看node,npm安装成功与否.打开cmd命令行, ...

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

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

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

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

  6. webpack快速入门——打包后如何调试

    在配置devtool时,webpack给我们提供了四种选项. source-map:在一个单独文件中产生一个完整且功能完全的文件.这个文件具有最好的source map,但是它会减慢打包速度: che ...

  7. webpack的入门实践,看这篇就够了

    webpack的入门实践 我会将所有的读者概括为初学者,即使你可能有基础,学习本节之前我希望你具有一定的JavaScript和node基础 文中的 ... ...代表省略掉部分代码,和上面的代码相同 ...

  8. webpack 快速入门 系列 - 自定义 wepack 上

    其他章节请看: webpack 快速入门 系列 自定义 wepack 上 通过"初步认识webpack"和"实战一"这 2 篇文章,我们已经学习了 webpac ...

  9. webpack 快速入门 系列 —— 性能

    其他章节请看: webpack 快速入门 系列 性能 本篇主要介绍 webpack 中的一些常用性能,包括热模块替换.source map.oneOf.缓存.tree shaking.代码分割.懒加载 ...

随机推荐

  1. 遇到XML-GB2312网页编码的处理方法

    报的错误:encoding error : input conversion failed due to input error, bytes  I/O error : encoder error 1 ...

  2. Jackson 序列化和反序列化

    博客地址:https://www.moonxy.com 一.前言 Jackson 功能很强大,既能满足简单的序列化和反序列化操作,也能实现复杂的.个性化的序列化和反序列化操作.到目前为止,Jackso ...

  3. Java使用Optional与Stream来取代if判空逻辑(JDK8以上)

    Java使用Optional与Stream来取代if判空逻辑(JDK8以上) 通过本文你可以用非常简短的代码替代业务逻辑中的判null校验,并且很容易的在出现空指针的时候进行打日志或其他操作. 注:如 ...

  4. spring中基于注解使用ehcache

    继续上篇,这篇介绍服务层缓存,基于注解的方式使用ehcache 注解的标签主要有4个:@Cacheable.@CacheEvict.@CachePut.@Caching,他们的用法是: @Cachea ...

  5. 【POJ - 3723 】Conscription(最小生成树)

    Conscription Descriptions 需要征募女兵N人,男兵M人. 每招募一个人需要花费10000美元. 如果已经招募的人中有一些关系亲密的人,那么可以少花一些钱. 给出若干男女之前的1 ...

  6. Centos 7 配置tomcat服务器

    1.首先查看当前系统版本 uname -a 2.安装之前查看系统是否安装了java rpm -qa |grep java rpm -qa |grep jdk rpm -qa |grep gcj 如果没 ...

  7. 品Spring:SpringBoot轻松取胜bean定义注册的“第一阶段”

    上一篇文章强调了bean定义注册占Spring应用的半壁江山.而且详细介绍了两个重量级的注册bean定义的类. 今天就以SpringBoot为例,来看看整个SpringBoot应用的bean定义是如何 ...

  8. selenium基于java 一 软件安装

    学习网站 http://www.testclass.net/selenium_java/ 一·安装java环境及eclipse,网上教程较多不讲 二·下载火狐浏览器(旧版) 下载地址:链接: http ...

  9. SpringSecurity原理剖析与权限系统设计

    Spring Secutity和Apache Shiro是Java领域的两大主流开源安全框架,也是权限系统设计的主要技术选型.本文主要介绍Spring Secutity的实现原理,并基于Spring ...

  10. 读《深入理解Elasticsearch》点滴-查询模版(结合官网手册,版本5.1)

    1.为什么使用查询模版 让应用程序开发者只需要把查询传递给elasticsearch,而不需要考虑查询语句的构造.查询DSL语法.查询结果过滤等细节知识. 2.使用版本5.1,查询模版在5.6中发生变 ...