您的位置：首页 > Web前端 > Webpack

webpack--简单入门(1)

2016-07-20 09:40 579 查看

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"
}
}

新建一个index.html：

<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<script type="text/javascript" src="bundle.js"></script>
</body>
</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:

<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项目有点困难。希望这篇文章能加深自己的理解，并且能给需要的人一些帮助！！

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航