在项目中使用Webpack

叁歲伎倆 2021-09-14 06:02 554阅读 0赞

# 一.在项目中安装 Webpack #

[nodejs全局安装和本地安装的区别][nodejs]

## 1.创建一个项目 ##

比如：webpack\_demo

## 2.确认创建 NPM 项目文件 ##

①进入项目目录

②执行命令npm init

③一路都enter直到yes

![20170921112541292][]

package.json创建成功

![20170921113242573][]

注意：如果不是新创建的项目，确定已有package.json，就不用npm init 再创建

## 3.项目中安装 Webpack  ##

输入： npm install webpack --save-dev

--save-dev 的意思是说 webpack 是一个开发工具，我们需要将这一点保存到 package.Json 文件中。  
install 命令可以简化为单个字符 i，注意是小写的 i。  
\--save-dev 还可以简化为大写的 S，写成 -S，你可以在这里查看[ instal 的更详细使用说明][instal]。

![20170921132258468][]

在webpack\_demo项目里就多出node\_modules文件，这里头有着webpack的包

![20170921132401102][]

这时候，你再检查一下 package.json 文件，它应该多了三行

![20170921132639440][]

# 二.开始组织自己的项目 #

## 1.在根目录下创建文件 ##

①新建src来放源文件；-------打包输出目录, 只需部署这个目录到生产环境  
②新建dist来放编译后文件；  
③新建examples来放html文件  
④创建webpack.config.js。 （先创个空的，待会儿加内容）

webpack.config.js是webpack的配置文件，要是不懂可以[查看官网][Link 1]

![20170921134301026][]

## 2.简单项目的编辑 ##

### ①src文件中创建 sourceFile.js ###

内容如下

![20170921142410908][]

### ②配置 webpack.config.js （关键一步） ###

//webpack.config.js module.exports = { entry:{//入口文件 bundle : __dirname + '/src/sourceFile.js' }, output:{ {//输出文件 path: __dirname + '/dist',//输出文件路径 filename: '[name].js'//输出文件名 } }

\_\_dirname 代表当前目录,Node.js会去识别  
entry中，是指入口文件的配置项，它是一个数组的原因是webpack允许多个入口点。值为一个路径，代表源文件的存放位置。键，则可以随便取，在我的配置中，编译后文件的名字就是这里的键。

output是指输出文件的配置项，path为编译后的文件存放的文件夹。 filename 为编译后文件夹名字。 其中\[name\]代表了entry中的键。也就是说上面是什么名字，编译后就是什么名字。

### ③ webpack -w 实施项目监控 ###

![20170921143633563][]

同时dist文件中也增加编译文件bundle.js

![20170921143954407][]

编译其实是为了实现模块化。基于AMD/CMD/CommonJS/es6的语法，浏览器是无法识别的。

### ④在examples文件里创建index.html ###

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>看看我们编译后的js可不可以用</title> </head> <body> <script src = "../dist/bundle.js"></script> </body> </html>

### ⑤打开浏览器，预览 ###

![20170921150508003][]

说明我们将源文件sourceFile.js编译后生成的bundle.js，是可以正常使用的。

[nodejs]: http://www.cnblogs.com/PeunZhang/p/5629329.html
[20170921112541292]: /images/20210813/7059ffd3fb7b482dbafc490996c67b46.png
[20170921113242573]: /images/20210813/f408a5f911ea42cfae6eaffeaf0791af.png
[instal]: https://docs.npmjs.com/cli/install
[20170921132258468]: /images/20210813/3590d89ac4e947c398dc05979d5244b1.png
[20170921132401102]: /images/20210813/0612dddd3a694c09bba8a897062293e1.png
[20170921132639440]: /images/20210813/eb523112d29b467083daa2eda1fd43ad.png
[Link 1]: http://www.css88.com/doc/webpack2/concepts/configuration/
[20170921134301026]: /images/20210813/8725be4e8839452fb0df88f9625a7c7c.png
[20170921142410908]: /images/20210813/d91d095a4bcf466ba11572d7d5a5ff02.png
[20170921143633563]: /images/20210813/57d7f019c07840bfa0e34a7389fffe3c.png
[20170921143954407]: /images/20210813/c0d85ae20f2a474893c9ef6cfed2c798.png
[20170921150508003]: /images/20210813/57fd0a8274a24207a0ead2ef03e6ef51.png