webpack4初窥

环境搭建

node(8.11.2)&&npm(6.1.0)

使用npm 的npx命令

基础入门

建立项目文件夹在文件夹下安装webpack(4.12.0)还有webpack-cli

npm init -y//创建包文件

npm install -D webpack webpack-cli //局部安装（全局已经装了的）-D大写的才能配置到devdependencies

devdependencies和dependencies的区别

devdependencies里的是开发时用到的工具（非必须的）

dependencies的配置是项目需要使用到的依赖（必须要有的-->如jQuery等）

开始项目

新建index.html 、index.js、main.js 三个文件

index.js 导出相关对象（函数、变量等）：module.exports={a,b,c} //注意：“=”“{}”是经常出错的点

接着在 main.js 中导入模块 index.js

main.js 导入模块：var index=require("./index") //main和index的路径是同一目录下的

再将 main.js 打包成 main.bundle.js //main.bundle.js 是不存在的，打包之后生成的文件

打包

npx webpack main.js -o main.bundle.js --mode development

-o指定输出文件

--mode development 指定为生产模式

导入

index.html 只有引入main.bundle.js即可

启动 

npx http-server

避免遗忘，特此撰文！！！