在项目中使用Webpack

来源：互联网发布：手机网络加速哪个好用编辑：程序博客网时间：2024/05/16 18:21

一.在项目中安装 Webpack

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

1.创建一个项目

比如：webpack_demo

2.确认创建 NPM 项目文件

①进入项目目录

②执行命令npm init

③一路都enter直到yes

package.json创建成功

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

3.项目中安装 Webpack

输入： npm install webpack --save-dev

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

在webpack_demo项目里就多出node_modules文件，这里头有着webpack的包

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

二.开始组织自己的项目

1.在根目录下创建文件

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

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

2.简单项目的编辑

①src文件中创建 sourceFile.js

内容如下

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

//webpack.config.jsmodule.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 实施项目监控

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

编译其实是为了实现模块化。基于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>

⑤打开浏览器，预览

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

阅读全文

0 0