> For the complete documentation index, see [llms.txt](https://azr.gitbook.io/webpack/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://azr.gitbook.io/webpack/zhun-bei-kai-shi/fei-js-wen-jian.md).

# 非JS文件

打包非JS文件，这里用CSS文件为例。

### 结构&目录

新建`style.css`文件

```javascript
body{
  background-color: green;
}
```

修改入口文件 `entry.js` 引入文件`style.css`

```javascript
document.write('I am entry.js');

document.write('<br/>');

document.write(require('./module'));
// CSS文件
require('./style.css');
```

### 报错

直接输入命令

```javascript
$ webpack entry.js  -o  bundle.js --mode=development
```

会进行报错

```javascript
ERROR in ./style.css 1:4
Module parse failed: Unexpected token (1:4)
You may need an appropriate loader to handle this file type.
> body{
|   background-color: green;
| }
 @ ./entry.js 7:0-22
```

这是webpack识别不来报错，webpack默认是无法打包非JS的文件，需要安装loader的包。

### loader

先通过命令

```javascript
$ npm init -y
```

进行生成 `package.json`

```javascript
rote to /Users/amor/Desktop/webpack/package.json:

{
  "name": "webpack",
  "version": "1.0.0",
  "description": "",
  "main": "bundle.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "Azr",
  "license": "ISC"
}
```

安装loader

```javascript
$ npm i style-loader css-loader -D
```

#### 页面增加loader

更改入口文件`entry.js`，将CSS文件的引入进行更改

```javascript
document.write('I am entry.js');

document.write('<br/>');

document.write(require('./module'));
// CSS文件
require("!style-loader!css-loader!./style.css") 
```

重新编译打包，刷新页面，就可以看到green的页面背景。

#### 命令行增加loader

将 入口文件`entry.js` 中的&#x20;

```javascript
require("!style-loader!css-loader!./style.css") 
```

&#x20;修改为&#x20;

```javascript
require("./style.css") 
```

然后执行：

```javascript
$ webpack entry.js -o bundle.js --mode=development --module-bind 'css=style-loader!css-loader'

有时候大概需要使用双引号
$ webpack entry.js -o bundle.js --mode=development --module-bind "css=style-loader!css-loader"
```

> 1. 报错`event not found: css` 的时候，更改一下引号的类型。

> &#x20;   2\.  以下报错，是将命令行输入错误导致的。一定是`--module-bind "css=style-loader!css-loader"`style-loader在前面的。&#x20;
>
> 报错内容：&#x20;
>
> > `ERROR in ./style.css Module build failed (from ./node_modules/css-loader/index.js): Unknown word (2:1)                                                                      2 | var content = require("!!./node_modules/style-loader/index.js!./node_modules/css-loader/index.js!./style.css"); | ^ 3 | 4 | if(typeof content === 'string') content = [[module.id, content, '']]; 5 |`

可以自己进行更改样式，来进行测试。