webpack命令的基本介绍

安装webpack前的准备，创建package.json，用npm init
npm init
安装webpack，这样package.json可以像目录一样记录webapck的版本，我用的是局部安装
npm install --save-dev webpack
使用webapck命令，把src/index.js 变成dist/main.js
npx webpack
提示你安装webapck-cli，那就同意一下ok
继续npx webpack步骤就得到结果了

手动创建的是WWebpack文件夹，src文件夹，和index.js文件，其余的都是上方命令创建的

image.png image.png

为什么一定是src、 dist是因为，使用npx webpack默认使用了你看不见的webpack.config.js, 内容如图所示

image.png

想修改的话，可以创建webapck.config.js，会覆盖默认的选项

image.png

命令也可以是指定配置的文件，一般都是webpack.config.js就可以了，我特意加了zz
npx webpack --config webpack.zz.config.js

image.png

想达到的效果是某html引入这个转变后的js，使得html可以 正常运行

在dist目录下创建html，引入这个js就可以了，即使里面的js会更新，但是html还是原来的，只要dist目录不删除，，，，，html就会一直在

image.png image.png

webpack配置-module，想html有css样式美化

这个css不是在html中写的，我是想在src的index.js中引入css，index.js引入都是require方式，需要配置才能让浏览器认识

image.png image.png

需要注意的是package.json还没有use数组中的插件，需要安装这两个插件
npm install --save-dev css-loader style-loader

image.png

webpack配置-plugin

image.png