Webpack00 环境搭建

201 阅读1分钟

一、环境搭建

开发工具:VS Code(自行下载)

安装Node: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

源码:gitee.com/andli/webpa…

参考文档

www.cnblogs.com/ldq678/p/10…

www.cnblogs.com/panax/p/931…

jspang.com/posts/2017/…