115 lines
3.2 KiB
Markdown
115 lines
3.2 KiB
Markdown
---
|
|
title: webpack(1)-初见
|
|
date: 2018-6-10 18:08:07
|
|
tags:
|
|
- webpack
|
|
categories:
|
|
- 前端杂烩
|
|
---
|
|
|
|
现在越来越多的JS代码被用在页面上 , 如何去很好地组织这些代码 , 成为了一个必须要解决的问题
|
|
不止有JS需要被模块化管理 , 前端当中很多的图片 css样式 , 都是需要被统一管理 , 方便进行扩展和维护的
|
|
<!-- more -->
|
|
|
|
所以webpack有如下几个目标 :
|
|
+ 将依赖树拆分
|
|
+ 保证初始加载的速度
|
|
+ 所有静态资源可以被模块化
|
|
+ 可以整合第三方的库和模块
|
|
+ 可以构造大型项目
|
|
|
|
|
|
#### 使用方法 :
|
|
|
|
##### 安装
|
|
1. 全局安装 `npm install webpack -g`
|
|
2. 项目初始化
|
|
`npm init` - 生成一个package.json文件
|
|
`npm install webpack --save-dev` - 添加webpack依赖
|
|
|
|
##### webpack的配置
|
|
每个项目下都必须有一个`webpack.config.js` , 它就相当于webpack的一个配置文件 , 告诉webpack该做什么
|
|
|
|
这里先写一个最基本的可用配置
|
|
其实还有很多的配置项 , 具体可以查看官方文档
|
|
|
|
```javascript
|
|
module.exports = {
|
|
//页面入口文件配置
|
|
//相当于执行这个JS文件可以直接或间接找到项目中用到的所有模块
|
|
entry: {
|
|
index : './src/entry.js'
|
|
},
|
|
//入口文件输出配置
|
|
//最终要打包生成什么名字的文件, 放在哪里
|
|
output: {
|
|
path: __dirname,//表示当前目录
|
|
filename: 'bundle.js'
|
|
},
|
|
module: {
|
|
//加载器配置
|
|
//告诉webpack每一种类型文件都需要使用什么加载器来处理
|
|
loaders: [
|
|
{ test: /\.css$/, loaders: ["style-loader","css-loader"] }
|
|
]
|
|
}
|
|
};
|
|
```
|
|
|
|
现在可以在项目当中创建`src`目录 , 并在其中创建entry.js文件和content.js文件
|
|
|
|
content.js
|
|
```javascript
|
|
//这个文件相当于项目中所用到的一个模块
|
|
module.exports = "现在的内容来自于content.js文件";
|
|
```
|
|
entry.js
|
|
```javascript
|
|
//这是我们定义的入口文件, 引用content模块
|
|
document.write(require("./content.js"));
|
|
```
|
|
|
|
在项目目录下执行`webpack`命令
|
|
可以看到在项目目录下生成了打包后的bundle.js
|
|
|
|
编写页面html文件
|
|
```xml
|
|
<html>
|
|
<head>
|
|
<meta charset="utf-8"/>
|
|
</head>
|
|
<body>
|
|
<script src="bundle.js"></script>
|
|
</body>
|
|
</html>
|
|
```
|
|
然后可以访问页面 , 看到JS被正确执行了
|
|
|
|
##### 使用加载器
|
|
可以使用加载器去加载一个CSS文件 , 在页面中就不需要对这个样式文件进行引入了
|
|
打包后的JS会执行把这个文件中包含的样式加入到页面当中的动作
|
|
需要安装`css-loader`和`style-loader`这两个模块
|
|
|
|
```bash
|
|
$ npm install css-loader style-loader --save-dev
|
|
```
|
|
然后编写自己的css文件
|
|
|
|
```css
|
|
body {
|
|
background-color : #ccc;
|
|
}
|
|
```
|
|
修改entry.js文件 , 引入这个css文件
|
|
```javascript
|
|
require("!style!css!./style/style.css");
|
|
document.write(require("./content.js"));
|
|
```
|
|
> 这里因为已经在配置文件中指定了.css文件所使用的加载器 , 所以也可以直接写`require("./style/style.css")`
|
|
|
|
|
|
css-loader是用于在JS当中加载CSS文件
|
|
style-loader是用于将CSS文件的样式加载到页面当中
|
|
|
|
重新执行webpack命令即可
|
|
 |