安装webpack
我现在本地搭建一个项目,来研究webpack
的用法,先用git bash
新建一个项目,这样的目的是为了生成一个package.json
的文件,有了这个包我们才可以进行后续的装包。
//如果没有额外的消息要写的话,可以添加-y参数,想要进行详细的配置的话可以去掉-y
npm init -y
执行后我们得到的项目目录为:

npm install --save-dev webpack // 直接安装
npm install --save-dev webpack@<version> // 指定版本进行安装
安装过之后,然后按照要求新建两个文件,现在的项目目录如下:

对index.js
和index.html
进行编写,编写的内容如下:


对package.json
进行调整

创造一个bundle
我们将上面项目进行目录调整,调整的结果为:

我们为了避免断网的情况,将loash
的依赖安装进来,安装lodash
依赖的语句是:
npm install --save lodash
我们现在看一下修改过目录结构之后,我们的代码变成了如下的样式:


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

配置文档的内容如下:

然后我们执行命令npx webpack --config webpack.config.js
来打包这个文档,打包成功,在界面上显示Hello webpack
的字样。
npm scripts
我们可以对指定的命令进行封装

这样的话我们就可以不使用npx webpack
而是npm build
网友评论