webpack基本配置

entry: 用来指定webpack以哪个文件作为起点入口进行编译打包，分析构建内部依赖图。

用法

单入口文件，也就是一个文件

    module.exports = {
       entry：'./src/index.js' //字符串形式
    }

多入口文件：

  module.exports = {
       entry：{ //对象形式
           index: './src/index.js',
           login: './src/login.js'
       }
    }

output：将编译后的文件bundles输出文件目录

用法

单出口：

 const path = require('path');
 module.exports = {
    output: {
       path: path.resolve(__dirname,'dist'), // 输出文件，__dirname表示根目录，第二个参数表示文件名
       filename: 'bundle.js' //生成的文件名，如果想再创建文件夹，可以'js/bundle.js'
    }
 }

多出口：

const path = require('path');
module.exports = {
    output: {
        path: path.resolve(__dirname,'dist'),// 输出文件，__dirname表示根目录，第二个参数表示文件名
        filename: '[name].js'
    }
}

多入口的打包出来后会分为对应的多个文件，例如index.js和login.js，我们运行打包好后的工程，在控制台的网络中可以看到，当我们访问index.js入口的页面，只会去拉取index.js。同样，当我们访问login.js入口的页面，只会去拉取login.js。

loaders

可以理解为webpack的翻译员，严格来说，通过loader支持其他文件类型转化成有效模块，添加进依赖树中。它本身是一个函数，接受源文件作为参数，返回转化的结果。

常用loader

名称	描述
babel-loader	转化es6或以上的新语法特性
css-loader	支持css文件的加载解析
less-loader	less转化成css
ts-loader	ts转化成js
file-loader	进行图片字体等的打包
raw-loader	将文件以字符串的文件导入
threadloader	多进程打包js和css

用法

loader生效顺序从右往左，且编译产出会作用于前面loader

    const path = require('path');
    module.exports = {
        rules: [
            {
            test: /\.ts$/, 
            use:[
                    {
                        loader: 'bable-loader',
                        options: {
                            //设置预定义环境
                            presets:[
                                [
                                    '@babel/preset-env',
                                    {
                                        // 兼容的目标浏览器
                                        targets: {
                                            'chrome': '88'
                                        }
                                        corejs: '3', // 制定corejs的版本，处理不同浏览器的兼容语法
                                        useBuiltIns: 'usage' //使用corejs的方式'usage'，表示按需加载
                                        
                                    }
                                ]
                            ]
                        }
                    },
                    {loader: 'ts-loader'}
                ]
            }, //test指定匹配规则，use指定使用loader
            exclude:/node_modules/
        ]
    }

plugin

可以理解为给webpack加dlc（数字逻辑控制器），加功能。 严格来讲，插件作用于bundle文件的优化，资源管理和环境变量的注入，作用于编译的整个过程。

常用的plugin

名称	描述
html-webpack-plugin	生成html模板
clean-webpack-plugin	清除打包文件

用法

    const path = require('path');
    const HtmlWebpakPlugin = require('html-webpack-plugin');
    module.exports = {
        plugins: [new HtmlWebpakPlugin({template:'./src/index.html'})]
    }

mode:

用来指定当前的环境是development、production、none；

设置mode可以自动使用webpack内置的函数，开启对应的插件。默认值为production。

development、production默认开启的插件是不一样的，none不开启插件。

• none：不优化
• development：开发者模式，帮助输出调试信息。
• production：生产模式，最高优化，启用压缩，忽略错误。

用法

    module.exports = {
        mode：'development'
    }

loader、plugin区别：

结合上面的解释，loader是模块转化器，plugin是扩展插件。

resolve

寻找所依赖的模块文件

resolve.modules

默认值是["node_modules"]， 意思是，webpack默认先去 当前目录的node_modules里找模块，要是没找着，就往上一级目录的node_modules找，还没找着，就继续往上，直到找到为止。
要是到头了还是没找着，那说明根本没这模块。

用法

实际使用的第三方模块，比如react，vue都是默认放在项目根目录的node_modules里，所以可以指明路径，减少查找。

  const path = require('path');
  module.exports = {
      resolve: {
          modules: [path.resolve(__dirname,'node_modules')], //匹配依赖文件的所在位置
          extensions: ['.ts'、'.js'] //匹配依赖文件扩展名
      }
  }

resolve.alias

给文件路径取个别名，这样每次导入模块就不用写一长串了

    const path = require('path');
    module.exports = {
         resolve: {
             alias: {
                 'button':path.resolve(__dirname,'src/components/button.js') 
                 'button$':path.resolve(__dirname,'src/components/button.js')
             }
         }
    }

所以不论哪个文件需要用到Button，直接 import Button from 'button'就好。 'button':path.resolve(__dirname,'src/components/button.js')用于精准匹配，button命中以button结尾的文件。 再比如，vue$命中vue.runtime.ems.js或者vue.esm.js 等以vue为结尾的文件。

resolve.mainFiles

默认值是["index"],意思是解析文件时，入口文件是index。