Webpack01-简单入门之项目打包
2019-06-04 本文已影响0人
微小码
一、环境搭建
开发工具：VS Code（自行下载）
安装Node：http://nodejs.cn/
安装webpack
全局安装
npm install webpack webpack-cli webpack-dev-server -g
注意：从webpack4开始，webpack-cli需要独立安装。
二、项目实战
1、建立一个空文件夹，比如叫webpack_demo
执行命令
npm init -y
image.png
得到package.json
2、安装webpack
npm i webpack -s -d
npm install webpack-cli
image.png
3、建立目录结构
创建文件夹 dist src
mkdir dist src
image.png
为了方便测试，建立entrey.js index.html bundle.js等文件
image.png
image.png
4、打包命令
webpack src/entery.js -o dist/bundle.js --mode development
image.png
image.png
5.访问index.html页面效果如下
image.png
注意
由于webpack4版本升级，导致之前的命令
webpack src/entery.js dist/bundle.js
无法正常使用
请使用
webpack src/entery.js -o dist/bundle.js --mode development
源码：https://gitee.com/andli/webpack_demo.git
参考文档
https://www.cnblogs.com/ldq678/p/10295870.html
