webpack初入门（二）

关于webpack的一些基本操作之基本命令和手动配置

---

1、打开code1文件夹，进行webpack局部安装，然后新建src文件夹>>index.js输入东西>>进行打包，分别是输入下面两句代码

$ cnpm i webpack webpack-cli -D    >>进行局部安装
$webpack    >>进行打包

打包完成后出现dist文件以及dist文件下的一个main.js文件，这时的main文件里只有一句代码

但是这里出现了warming

大概就是打包没说名是哪种模式下（生产模式还是开发模式下的打包）

这里的mode解释下：
development 表示我们是开发环境代码的编译

• 压缩，但是不会删除注释
  production 表示生产环境的代码的编译
• 压缩、删除注释

输入 webpack -d 回车，说明是在开发环境下进行打包
这时的warming就消失了，并且点开main.js文件发现多了一些东西

解析一下编译后生成的文件

第一个函数式自执行函数

• 作用：用来处理模块化
  后面其他的自执行函数都是对模块的编译
• 比如： 将src/index.js 中的内容放到了eval函数中然后执行

然后在dist文件【这个打包的文件】中新建个index.html文件，并且将main.js文件关联进来

这时候用live server打开后出现

成功啦！

然后我还想再输出其他内容，然后我在index.js中输入多点

打开后发现↓ 并没有改变

因为关联的main文件是我们打包后的结果，那么我打包后还想增加内容怎么办呢？这里说下webpack的两个命令

• webpack -p 表示为生产环境做打包压缩

• webpack -w 表示实时监听文件的变化

webpack -w 能够在打包后实时更新，比如我现在输入 webpack -w 后，再在index.js文件中新增一些内容,打开后显示

成功啦！嘻嘻嘻

二、手动配置

因为上面的打包是默认的方式进行的，在需要的情况下，能够按照自己的想法进行更改打包才行，配置主要是入口和出口，入口是指：哪个文件进行打包，出口是指：打包的文件在哪的地方输出

---

1、单页面配置

首先在code1文件夹目录下新建一个config文件夹（放配置文件用的）,config文件下新建两个我们需要的文件，分别是webpack.config.dev.js和webpack.config.prod.js

config目录

• webpack配置文件的目录
• 项目的webpack配置目录
• webpack.config.dev.js 这个配置针对的是开发环境
• webpack.config.prod.js 这个配置针对的是生产环境

完成上面的步骤后，在package.json文件中加入


注意标点符号的书写正确

dev 是指运行dev命令后会执行那个后面的文件，即webpack.config.dev.js
build也是prod，但是习惯写build，然后也是运行build命令后会执行后面那个文件

当输入 $ npm run dev 命令后执行的顺序逻辑

接下来在webpack.config.dev.js中书写配置!

注意这里打包没成功时检查package.json文件中的文件名是否写正确了

$ npm run dev

打包成功后出现了kenzi文件和app.js

entry 入口

• entry对应的入口只有一个文件： 单页面应用 【常见】
• entry对应的入口有多个文件： 多页面应用

2、多页面配置

当一个项目中有多个文件夹一起压缩时，如这样↓

这时需要对webpack.config.dev.js文件做修改↓入口文件变多个，输出的文件名也更改
filename中的[name]是按照打包前的名字输出

运行 $ npm run dev 回车

打包完毕！

问题：验证webpack是否能自动解决模块化依赖问题

比如A模块依赖B模块，B模块依赖C模块

新建module文件夹，注意module的拼写

![在这里插入图片描述](https://img-blog.csdnimg.cn/2020050617353762.png

然后在index.js中关联

这时检查下文件的书写是否正确
然后运行 $ npm run dev

在index.html中关联，然后打开

验证webpack是否能自动解决模块化依赖问题 可以！

loader 转换器 可以将其他类型文件转换为我们想要的类型文件

首先【在src下】新建个asset文件然后放个global.css

在index.js中引入css文件

这时候不能直接执行 打包命令，因为js和css是两种不同的语法，会报错的

解决方法：css - > js loader转换器

首先安装 css - > js 的 loader转换器，css-loader转换器

$ cnpm i css-loader -D

在webpack.config.dev.js中配置下loader

注意书写格式

然后再运行打包

这时css文件已经被编译了，但是我们打开浏览器时还是没有变化

这时我们需要将再来个将js - >css文件loader，style-loader 这样才能显示出来

$ cnpm i  style-loader -D

安装成功后配置下

这时注意 这两个loader的顺序不能调换错，style-loader转换器后执行！在这个use数组中下标越靠前越后执行，所以style-loader要写在前面

这时再来执行打包命令

打开浏览器后发现

出现了一片草原！成功啦！

不用担心记不住，只需要去webpack官网找到源码即可

其他的转换器同理