webpack--简单入门(1)
来源:互联网 发布:linux w重复 编辑:程序博客网 时间:2024/05/21 19:30
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安装到当前的项目依赖中:
npm install webpack --save-dev//缩写: npm i webpack -D// –save:模块名将被添加到dependencies,可以简化为参数-S。// –save-dev: 模块名将被添加到devDependencies,可以简化为参数-D。安装后package.json:
{ "name": "demo1", "version": "1.0.0", "description": "", "main": "index.js", "scripts": { "test": "echo \"Error: no test specified\" && exit 1" }, "author": "mnixu", "license": "ISC", "devDependencies": { "webpack": "^1.13.1" }}
<html><head> <meta charset="UTF-8"> <title>Document</title></head><body> <script type="text/javascript" src="bundle.js"></script></body></html>
document.write('<h1>Hello World</h1>');
// webpack.config.jsmodule.exports = { entry: './main.js', output: { filename: 'bundle.js' }};这个文件的意思是 把main.js文件打包为bundle.js文件。
其中bundle.js文件是Webpack生成出来的,不是我们创建的。
cmd键入命令:
$ webpack
打开index.html就能看到 hello world 了.
webpack也可以将依赖模块打包到一个文件:
新建一个main1文件
// main1.jsdocument.write('<h1>Hello World</h1>');更改main.js文件
//main.jsdocument.write('<h1>Hello World</h1>');require("./main1.js")重新打包 可以看到页面
Webpack 会分析入口文件,解析包含依赖关系的各个文件。这些文件(模块)都打包到 bundle.js 。Webpack 会给每个模块分配一个唯一的 id 并通过这个 id 索引和访问模块。在页面启动时,会先执行 入口文件 中的代码,其它模块会在运行 require 的时候再执行。
webpack还可以打包多个入口文件:
在原来项目下新建文件夹,进入文件夹:
新建main1.js main2.js文件:
// main1.jsdocument.write('<h1>Hello World</h1>');// main2.jsdocument.write('<h2>Hello Webpack</h2>');新建webpack.config.js文件:
//webpack.config.jsmodule.exports = { entry: { bundle1: './main1.js', bundle2: './main2.js' }, output: { filename: '[name].js' }}新建 index.js:
<html><head> <meta charset="UTF-8"> <title>Document</title></head><body> <script type="text/javascript" src="bundle1.js"></script> <script type="text/javascript" src="bundle2.js"></script></body></html>重新打包 可以看到页面
4.结语
最近在学习vue,对于我这种没用过前端自动化构建工具的人来说 使用webpack构建vue项目有点困难。希望这篇文章能加深自己的理解,并且能给需要的人一些帮助!!
2 0
- webpack--简单入门(1)
- webpack新手简单入门1
- webpack--简单入门(2)
- webpack 简单入门
- webpack的使用(1) ----简单快速入门
- webpack入门(1)
- webpack入门学习1
- webpack 2.6.1入门
- webpack入门(1)
- 使用webpack 使用Echarts3简单入门
- Webpack入门之一:从一个简单例子入门
- webpack 入门一篇足够,简单而又详细入门
- Webpack入门
- webpack 入门
- webpack 入门
- webpack入门
- 入门 Webpack
- WebPack入门
- ubuntu echo输出带颜色的字体
- BMI体重指数计算器
- 用QT写一个搜索引擎思路
- 面试题积累
- poj2632
- webpack--简单入门(1)
- Java开发之Spring MVC (四)
- UVA 424
- 例题3-2 WERTYU UVa10082
- 一个收集了502款开源iOS应用的开源项目
- 十分给力jquery插件miniui框架整合java实现各种图形报表管理系统
- Java快速排序
- Android之你不可不知道的小知识
- Android进程守护, 服务长存