webpack配置

配置webpack build命令

配置好了这个命令以后打包项目就可以使用：

npm run build

这个命令去让webpack打包，并且输出到dist(下图配置了output就是打包结果输出到当前目录下的dist文件夹里，输出结果的名字叫bundle.js)

上面的代码有问题，还是要用\转义一下.这个符号

配置webpack处理图片，这里为了简单，只处理gif,jpg,jpeg,png,svg这些类型的图片，use对应的数组里面不是字符串，而是对象，因为对象里面可以用options进行更细分的配置

比如我们这里就限定了处理大小为1024以下的文件才会处理，处理以后的名字就是原来的文件名+ aaa.后缀名，这个可以自定义

配置完了以后要安装一下相应的loader:
因为url-loader是依赖file-loader的，所以还要安装file-loader

npm i style-loader url-loader file-loader

css预处理器：
我们配置一下让webpack可以处理styl类型的文件：

stylus-loader处理stylus代码变成css标准的代码，然后就不管了，交给css-loader处理，css-loader处理好了css代码以后这些代码要写在html里面的，所以需要style-loader
所以webpack就是这样层层处理，然后抛给下一级继续处理这样的一个机制

我们还需要安装stylus-loader和stylus，因为需要stylus去处理:

npm i stylus-loader stylus

配置好了styl以后我们新建一个stylus文件

现在导入stylus文件：

重新打包一下：

npm run build