---
title: webpack(1)-初见
date: 2018-6-10 18:08:07
tags:
- webpack
categories:
- 前端杂烩
---
现在越来越多的JS代码被用在页面上 , 如何去很好地组织这些代码 , 成为了一个必须要解决的问题
不止有JS需要被模块化管理 , 前端当中很多的图片 css样式 , 都是需要被统一管理 , 方便进行扩展和维护的
所以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
```
然后可以访问页面 , 看到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命令即可
