首先我们新建项目02webpack初体验，在项目目录下使用命令行输入npm init创建项目描述文件package.json，然后本地安装webpack和webpack-cli这两个包，安装完成之后，再分别创建build和src文件夹，最后生成的项目结构如下：
# 项目目录
02webpack初体验
-build
-node_modules
-src
--index.js
--package.json
1
2
3
4
5
6
7
2
3
4
5
6
7
# src/index.js代码
function add(x, y) {
return x + y;
}
console.log(add(1, 2));
1
2
3
4
2
3
4
# 打包
命令行输入如下代码：
webpack ./src/index.js -o ./build/build.js --mode=development
执行命令，我们会发现build文件夹下多了一个build.js文件，打开后我们会发现多了很多代码，我们拉到最后，可以看到index.js中的代码已经打包
/***/ "./src/index.js":
/*!**********************!*\
!*** ./src/index.js ***!
\**********************/
/*! no static exports found */
/***/ (function(module, exports) {
eval("/*\r\n index.js: webpack入口起点文件\r\n\r\n 1、运行指令：\r\n 开发环境：webpack ./src/index.js -o ./build/build.js --mode=development\r\n webpack会以 ./src/index.js 为入口文件开始打包，打包后输出到 ./build/build.js，整体打包环境是开发环境\r\n 生产环境：webpack ./src/index.js -o ./build/build.js --mode=production\r\n*/\r\n// import './index.css'\r\n\r\n// import data from './data.json'\r\n// console.log(data);\r\nfunction add(x, y) {\r\n return x + y;\r\n}\r\nconsole.log(add(1, 2));\n\n//# sourceURL=webpack:///./src/index.js?");
/***/ })
/******/ });
1
2
3
4
5
6
7
8
9
10
11
12
2
3
4
5
6
7
8
9
10
11
12
# 测试样式资源打包
我们在src文件夹下再新建文件index.css，写入一些样式，在index.js中通过import引入，再执行打包命令
import './index.css';
function add(x, y) {
return x + y;
}
console.log(add(1, 2));
1
2
3
4
5
6
2
3
4
5
6
这个时候我们会发现命令报错，显示没有办法对css文件进行处理，这证明了webpack本身只能打包js资源，对于非js资源就需要借助loader来进行处理，后续我们会说明如何打包非js文件资源，