1.安装webpack

1).打开项目目录终端,输入命令:

npm install webpack webpack-cli -D

2).然后在项目根目录中,创建一个 webpack.config.js 的配置文件用来配置webpack

在 webpack.config.js 文件中编写代码进行webpack配置,如下:

module.exports = {

    mode:"development"//可以设置为development(开发模式),production(发布模式)

}

补充:mode设置的是项目的编译模式。

如果设置为development则表示项目处于开发阶段,不会进行压缩和混淆,打包速度会快一些

如果设置为production则表示项目处于上线发布阶段,会进行压缩和混淆,打包速度会慢一些

3).修改项目中的package.json文件添加运行脚本dev,如下:

"scripts":{

    "dev":"webpack"

}

注意:scripts节点下的脚本,可以通过 npm run 运行,如:

运行终端命令:npm run dev

将会启动webpack进行项目打包

4).运行dev命令进行项目打包,并在页面中引入项目打包生成的js文件

打开项目目录终端,输入命令:

npm run dev

等待webpack打包完毕之后,找到默认的dist路径中生成的main.js文件,将其引入到html页面中。

浏览页面查看效果。

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。