webpack配置项详细学习

关于webpack我相信大多数前端工程师都很熟悉，并且也经常使用。但是呢，大多数的时候都是直接拿个脚手架直接一搭，配点东西就不管了，这种知其然而不知其所以然的状态让人很不舒服。所以趁着最近不忙，赶紧整一波；

webpack是干啥的？

   用我自己理解的话就是，把项目中用到的多个文件，比如.js、.css、.less、.png等好多个文件，处理成一个或者几个文件，然后html只需要引用一下就完事了。

打包有啥用？

  最明显的，一个页面加载一个js比起加载一堆js，一堆css，一堆图片速度快慢显而易见。还有你打包后的代码是压缩的，不容易被别人搞懂。传统的页面只要F12一下，用的啥框架，大概的结构基本都能摸清楚。按需加载，我用啥给我整啥，不用的不加到代码里，无形中减少了代码量。还有些别的好处（想起来在加，笑~）。

开始学呗

先整几个必不可少的配置项：

const path=require('path');// nodejs里面的路径模块
module.exports={
    // 入口
    entry:{
        app:'./src/index.js',
    },
    // 输入
    output:{
        filename:'[name].bundle.js',
        path:path.resolve(__dirname,'dist'),
    },
    // 文件解析器
    module:{
        rules:[]
    },
    // 插件
    plugins:[],
}

这四个是最关键的配置项：

entry就是告诉webpack从哪开始打包你的代码，这块必须有一个或者多个

output是告诉webpack我的代码打包完了叫啥（filename），在哪（path），该打包成几个（取决于entry有几个）

module是确定该如何处理css、less、png等一系列不是js的文件，常用的有css-loader、style-loader、file-loader等，具体的用法如下：

 module:{
    rules:[
        {test:/\.(css|less)$/,use:['style-loader','css-loader']},
        {test:/\.(png|svg|jpg|gif)$/,use:['file-loader']},
        {test:/\.(woff|woff2|eot|ttf|otf)$/,use:['file-loader']}
    ]
},

用正则来筛选后缀，use确定需要用到的loader，也有include等参数来确定处理哪个文件夹里面的文件

plugins是用来配置一些插件来辅助打包，注意这块是一个数组，里面的项都是new的一个实例

。。。未完待续