webpack初体验

webpack安装

npm install webpack webpack-cli -g //全局安装
npm install webpack webpack-cli -D //局部安装

webpack的安装目前分为两个：webpack，webpack-cli
那么他们是什么关系呢？

•  - 执行webpack命令时，会执行node_modules下的.bin目录下的webpack
•  - webpack在执行时是依赖webpack-cli的，如果没有安装就会报错
•  - 而webpack-cli中代码执行时，才是真正利用webpack进行编译和打包的过程
•  - 所以在安装webpack时，我们需要同时安装webpack-cli（第三方脚手架事实上是没有使用webpack-cli的，而是类似于自己的vue-service-cli的东西）

webpack打包

初步创建文件，使用es6模块，在src文件下创建index.js文件

同时在index.html进行引用

使用全局webpack打包（这边还是建议使用局部webpack打包）

打包成功后会生成dist文件

此时要运行打包后的文件需要在index.html作如下修改

<script src="./dist/main.js"></script> //type可以不用添加了

生成配置文件package.json

npm init -y
//若文件名存在中文，则运行npm init 随后自定义一系列操作名称

//局部安装webpack
npm install webpack webpack-cli -D

//第二种打包方式
npx webpack  //直接在node_modules下查找到webpack运行打包

package.json配置打包形式

npm run build --终端运行也可进行打包

这里通过配置来指定入口和出口，不过一般不会在这里配置，具体内容在后续会进行补充