webpack安装步骤及文件

1.检查是否有安装npm。

在windows系统下，同时按下windows+R调出命令，输入CMD，如下图：

图1

打开命令工具，输入命令：npm -v

如下图：

图2

图中显示了5.6.0说明已经安装了npm，显示的5.6.0是npm的版本，如果没有安装的话就要先去安装一下npm之后再继续接下去的 *** 作；

2.进入项目文件夹并生成package.json文件。

新建一个空文件newitem，如下图：

图3

然后用命令工具进入这个新项目的空文件夹，然后再输入npm init，如下图：

图4

3.为项目添加webpack依赖。

在命令工具中输入命令：npm install webpack --save-dev

如下图：

图5

完成以上 *** 作之后你会发现你新建的项目文件里面多了一些文件，如下图：

图6

4.新建webpack.config.js配置文件。

图7

接着就可以通过package.json文件中的scripts来启动不同的服务，而webpack.config.js文件是用来设置webpack相关服务内容的。

下一篇文章再具体讲解如何在webpack.config.js之中进行各种配置了。

webpack 的默认配置文件是 webpack.config.js ,所以在我们的项目根目录下(02webpack-demo)新建一个webpack.config.js的文件，里面啥都不写，这个时候我们在终端中运行 npx webpack ,就会在根目录下生成一个 dist 文件夹，里面有一个 main.js ，这是 webpack 利用默认的配置项为我们打包生成的文件,接下来我们来简单配置一下这个文件里面的内容:

配置好文件后，再次运行 npx webpack ,这个时候在我们的项目目录下就生成了一个 bundle 文件夹，里面有一个 bundle.js 就是 webpack 帮我们翻译好的文件了，在我们的 demo.html 中引入 bundle.js ，在浏览器中打开 demo.html 文件，可以看到我们打印的内容已经正确的出现在了浏览器控制台中了。

我们已经知道了 webpack 的默认配置文件的名字是 webpack.config.js ，那么有没有办法修改这个名字呢？比如我想把这个名字改为 test.config.js 或者其他什么名字，答案是有的，比如我改成了 test.js ，那么在利用 webpack 进行打包的时候就应该运行 npx webpack --config test.js ，打包结果和上面的还是一样的.

在上面的打包过程中，每次打包的时候都要执行 npx webpack 或者 npx webpack --config test.js ,你可能会觉得有点繁琐，我们可以在 package.json 中的 scripts 中配置一个脚本，如下所示:

配置好脚本之后，在终端中执行 npm run bundle 这个命令， webpack 就会重新帮我们打包文件，这里涉及到的知识点是 npm scripts ,它的原理是当我们在终端中执行 npm run bundle 的时候，实际上在运行的就是 package.json 配置中的 bundle 这个命令，而 bundle 这个命令的底层就是在帮我们执行 webpack 这个命令，这里有一个点需要注意，如果我们在 scripts 中以命令的形式去执行 webpack 的时候，首先会在工程目录下的 node-modules 下去找是否安装了 webpack ，如果安装了的话就会直接使用 node-modules 中的 webpack ,但是如果 node-modules 下面没有 webpack ,就会去全局寻找 webpack

1.全局安装的 webpack ,打包的之后在终端中运行 webpack index.js

2.局部安装的 webpack ，打包的之后在终端中运行 npx webpack index.js

3.通过配置 npm scripts 脚本，打包的之后在终端中运行 npm run 你配置的脚本的内容 ，比如我配置的脚本为:

那么在打包的时候运行 npm run test 即可

---