webpack实践(1)-- 安装

2019-06-20 本文已影响0人 kim_jin

安装webpack

我现在本地搭建一个项目，来研究webpack的用法，先用git bash 新建一个项目，这样的目的是为了生成一个package.json的文件，有了这个包我们才可以进行后续的装包。

//如果没有额外的消息要写的话，可以添加-y参数，想要进行详细的配置的话可以去掉-y
npm init -y

执行后我们得到的项目目录为：

对webpack进行配置

npm install --save-dev webpack // 直接安装
npm install --save-dev webpack@<version> // 指定版本进行安装

安装过之后，然后按照要求新建两个文件，现在的项目目录如下：

新建的文件的目录

对index.js和index.html进行编写，编写的内容如下：

index.html

index.js

对package.json进行调整

package.json

创造一个bundle

我们将上面项目进行目录调整，调整的结果为：

对目录结构进行调整

我们为了避免断网的情况，将loash的依赖安装进来，安装lodash依赖的语句是：

npm install --save lodash

我们现在看一下修改过目录结构之后，我们的代码变成了如下的样式：

index.js

index.html

我删除了上面显示的引入<script src="https://unpkg.com/lodash@4.16.6"></script>这一行的代码，然后将index.js 改成了main.js,然后执行npx webpack 打包成功后访问，在浏览器中打开index.html，如果一切正常，你应该能看到以下文本：Hello webpack。当然在打包过程中会有一定的警告，但是这并不影响使用。