-
初始化package.json
npm init
-
下载并安装webpack
npm install webpack webpack-cli -g npm install webpack webpack-cli -D
-
创建文件
创建src文件,创建index.js 入口文件,代码如下:function add(x,y){ return x+y } console.log(add(1,2));
-
运行指令
一. 开发环境指令:webpack ./src/index.js -o ./build/built.js --mode=development
《1》-webpack会以.src/index.js为入口文件开始打包,打包后输出到 ./build/build.js 整体打包环境 是开发环境
《2》功能:webpack能够编译打包js和json文件,并且能将es6的模块化语法转换成浏览器能识别的语法。
《3》打包成功结果图:
注意:
遇到报错信息:webpack : 无法加载文件 C:\Users\Administrator\AppData\Roaming\npm\webpack.ps1,因为在此系统上禁止运行脚本 报错问题
解决方法:
《1》在win10 系统中搜索框 输入 Windos PowerShell
《2》打开了powershell命令行之后,选择以管理员身份运行,输入
set-ExecutionPolicy RemoteSigned 然后更改权限为A
《3》最后通过 get-ExecutionPolicy 查看当前的状态
《4》重新输入 指令 (开发环境或者 生产环境)参考链接:
https://blog.csdn.net/Autism_er/article/details/108444522二. 生产环境
webpack ./src/index.js -o ./build/built.js --mode=production
《1webpack会以 ./src/index.js 为入口文件开始打包,打包后输出到 ./build/built.js,整体打包环境,是生产环境。
《2》功能:在开发配置功能上多一个功能,压缩代码。
《3》打包成功结果图:
-
在 build 文件夹中创建 index.html 文件,并引入打包后的资源
<script type="text/javascript" src="main.js"></script>
运行结果:
-
创建json文件,并在 index.js 中引入,重新打包
{ "name": "jack", "age": 18 }
import data from './data.json'; console.log(data);
webpack ./src/index.js -o ./build/built.js --mode=development
打包结果:
可见,可以打包json文件。
-
创建 index.css 文件,并在 index.js 中引入,重新打包
html, body { height: 100%; background-color: pink; }
import './index.css';
webpack ./src/index.js -o ./build/built.js --mode=development
打包结果:
打包失败。
结论:
- webpack能处理js/json资源,不能处理css/img等其他资源
- 生产环境和开发环境将ES6模块化编译成浏览器能识别的模块化
- 生产环境比开发环境多一个压缩js代码。