webpack几个关键概念

webpack：静态模块打包器

几个核心概念

入口（entry）: 配置entry属性，来指定一个或多个入口起点。进入入口起点后，webpack会找出哪些模块和库是入口起点依赖的。（包括直接依赖和间接依赖），每个依赖项随即被处理，最后输出到bundles文件中。默认值为 ./src

webpack.config.js

 module.exports = {
   entry:'./path/my/filr.js'  
 };
 
 也可以像如下方式：
 
 const config = {
   enrty: './path/my/filr.js' 
 };
 module.exports = config;
复制代码

输出（output）: 告诉webpack在哪里输出它所创建的bundles,以及如何命名这些文件，默认值为./dist，基本上整个程序结构都会被编译到指定的输出文件夹中。可以通过配置output属性来设置。

loader: 模块转换器，让webpack能够处理非JS文件（webpack自身只理解JS），loader可以将所有类型的文件转换为webpack能够处理的有效模块，然后利用webpack的打包能力进行处理。

在另一个层面，在webpack的配置中loader有两个目标：1、test属性，用于标识出进行转换的某个或某些文件。2、use属性，表示进行转换时，应该使用哪个loader。

webpack.config.js

  const path = require('path');
  const config = {
      output:{
          filename:'my.bundle.js'
      },
      module:{
          rules:[
             test:/\.txt$/,use:'raw-loader'
          ]
      }
  }
  module.exports = config;
 上面的配置中，如果碰到被解析成.txt的路径时，在打包之前先用raw-loader转换。
复制代码

记住一点：在定义loader时，要定义在module.rules中，而不是单纯的rules

插件（plugins）: 插件的使用范围很广，从打包优化和压缩，一直到重新定义环境中的变量。想要使用一个插件，只需要require()它，然后添加到plugins数组中。

转载于:https://juejin.im/post/5b5ac4c86fb9a04fe820fa55