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. python+selenium六:隐式等待

    python+selenium六:隐式等待   # 隐式等待 # 全局生效,只写一次即可(仅当前页面)# 若有页面切换,需sleep等待新页面出现后,再使用此方法 # 如:在35秒内,等待操作完成,完 ...

  2. 无法将类型为“System.Xml.XmlComment”的对象强制转换为类型“System.Xml.XmlElement”

    今天开发C#项目时,有一个需要读取XML的功能点.编码过程中遇到了如标题所示的异常,如下图所示: 查询官网后得知XmlComment是注释节点的类型,如下图所示: 于是得出结论,使用XmlDocume ...

  3. Leetcode 121.买股票的最佳时机

    题目描述: 给定一个数组,它的第 i 个元素是一支给定股票第 i 天的价格. 如果你最多只允许完成一笔交易(即买入和卖出一支股票),设计一个算法来计算你所能获取的最大利润. 注意你不能在买入股票前卖出 ...

  4. 2018年蓝桥杯java b组第四题

    标题:测试次数 x星球的居民脾气不太好,但好在他们生气的时候唯一的异常举动是:摔手机.各大厂商也就纷纷推出各种耐摔型手机.x星球的质监局规定了手机必须经过耐摔测试,并且评定出一个耐摔指数来,之后才允许 ...

  5. Google AppCrawler初探

    AppCrawler是什么 你可以把它想成类似monkey一样的工具,调起你的应用程序并执行各种动作(点击,输入,滑动等)来通过这种方式 来查看各种情况下应用程序的状态 官方文档链接:AppCrawl ...

  6. Spring boot 梳理 - mappingJackson2JsonView

    MappingJacksonJsonView已被废弃了: http://static.javadoc.io/org.springframework/spring-webmvc/4.0.1.RELEAS ...

  7. 阿里云服务器CentOS6.9 nexus私服使用

    exus安装成功之后,我们开始使用. 登录nexus: 访问地址:http:ip地址:8081/nexus 默认登录账号:admin 密码:admin123 登录成功之后页面: 点击[Reposito ...

  8. Flask基础(07)-->正则自定义转换器

    正则自定义转换器 为什么要自定义正则转换器? 因为默认转换器太过于笨重,往往不能满足我们实际业务的需求,这时候我们就需要自定义正则转换器了. 那么我们怎么自定义正则转换器呢? from flask i ...

  9. 向net core 3.0进击——Swagger的改变

    目录 前言 引入 测试 小结 前言 十一小长假在不知不觉间可都没了,在这个小尾巴的空隙,把这两天鼓捣的net core 3.0升级过程记录一下,首先还是根据之前的顺序一个个补充进来,先从Swagger ...

  10. ThinkPHP框架快速开发网站

    使用ThinkPHP框架快速搭建网站 这一周一直忙于做实验室的网站,基本功能算是完成了.比较有收获的是大概了解了ThinkPHP框架.写一些东西留作纪念吧.如果对于同样是Web方面新手的你有一丝丝帮助 ...