逍遥阁

前端打包工具webpack和nodejs的关系

关键词: Node.js webpack

前端打包工具webpack和nodejs的关系

###生成package.json文件(在项目目录test执行)

```
npm init -y
```

生成的文件`package.json`内容如下

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

该段json配置中`scripts`键下配置了一个`test`选项，这样就可以通过`npm run test`来运行，如果我增加一个`build`选项

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

那么就可以通过`npm run build`来运行

###安装webpack打包工具

官方不推荐全局安装`webpack`，全局安装的缺点是只能使用同一个版本的`webpack`，如果觉得没有关系也可以全局安装

1.安装在项目目录(在项目目录test执行)

```
npm install --save-dev webpack
```

2.全局安装

```
npm install -g webpack
npm install --global webpack
```

如果将`webpack`安装在项目目录test里面，则他的路径为`./node_modules/.bin/webpack`

###webpack的使用

1.根据入口文件生成打包后的文件(在项目目录test执行)

```
./node_modules/.bin/webpack index.js bundle.js
```

其中`index.js`是入口文件，如果里面有依赖，会自动处理，最后生成用于正式环境的`bundle.js`文件

2.根据配置文件进行打包(在项目目录test执行)

```
./node_modules/.bin/webpack --config webpack.config.js
```

如果配置文件是默认的`webpack.config.js`，则可以简写为

```
./node_modules/.bin/webpack
```

3.将webpack的打包命令写进nodejs的配置文件package.json

```
{
    "name": "test",
    "version": "1.0.0",
    "description": "",
    "main": "index.js",
    "scripts": {
        "test": "echo \"Error: no test specified\" && exit 1",
        "build": "./node_modules/.bin/webpack --config webpack.config.js"
    },
    "keywords": [],
    "author": "",
    "license": "ISC"
}
```

这样直接运行`npm run build`即可

admin
2017-05-18 10:18:51
nodejs

文章分类

文章标签

文章归档

友情链接

前端打包工具webpack和nodejs的关系