使用webpack详细步骤

作者: 湾仔大宇哥
来源: 51数据库
2021-07-06

webpack网址：https://webpack.js.org
1.下载并安装nodejs

2.选择Add to PATH系统自动配置环境变量

3.分别执行命令node -v 和npm来验证nodejs是否安装成功

4.输入命令npm install webpack@3.6.0 -g(全局)和npm install webpack@3.6.0 --save-dev(局部)安装webpack，此时webpack环境就搭建好啦，我们可以使用webpack来对文件进行打包了

5.在根目录下分别创建文件夹src和dist创建文件index.html，然后在src下创建js文件，例如我在src下分别创建了main.js，mathUtil.js和info.js

6.其中mathUtil.js中写入了如下代码并使用commenJs语法对变量进行导出

info.js操作如上

7.main.js用于对以上两个文件中导出的变量进行导入并使用，相关代码如下

8.打开终端输入
cd 01.webpack的使用
webpack ./src/main.js ./dist/bundle

对文件的打包操作完成了
想要使用npm run build来执行打包操作吗？那么我们来进行如下配置叭
1.首先我们需要在根目录下创建名为webpack.config.js（必须这个名字奥）的文件

2.然后在webpack.config.js中进行如下配置

3.因为path中需要获取动态的文件绝对路径，我们就需要在终端中输入npm init进行初始化
然后输入npm install然后就会生成package.json文件了，在这个文件中进行配置

4.这样我们就可以使用npm run build命令就可以进行打包操作啦，完成！