webpack 四个重要的核心概念

入口（entry）

1.配置多页面入口，{多键值对}

输出（entry）

loader

loader让webpack能够去处理那些非JavaScript文件。

test 属性，用于标识出应该被对应的 loader 进行转换的某个或某些文件。
use 属性，表示进行转换时，应该使用哪个 loader。

	{
	  output: {
	    filename: 'my-first-webpack.bundle.js'
	  },
	  module: {
	    rules: [
	      { test: /\.txt$/, use: 'raw-loader' }
	    ]
	  }
	};

解释为： "嘿，webpack 编译器，当你碰到「在 require()/import 语句中被解析为 '.txt' 的路径」时，在你对它打包之前，先使用 raw-loader 转换一下。"

插件（plugins）

loader 与 plugins区别

用于转换某些类型的模块，而插件则可以用于执行范围更广的任务；
plugins:插件的范围包括，从打包优化和压缩，一直到重新定义环境中的变量。插件接口功能极其强大，可以用来处理各种各样的任务。

manifest

在使用 webpack 构建的典型应用程序或站点中，有三种主要的代码类型：

你或你的团队编写的源码。
你的源码会依赖的任何第三方的 library 或 "vendor" 代码。
webpack 的 runtime 和 manifest，管理所有模块的交互。

wepback module 配置

条件匹配：通过test、include、exclude来应用规则的文件；
对选中后的文件通过 use 配置项来应用 Loader，可以只应用一个 Loader 或者按照从后往前的顺序应用一组 Loader，同时还可以分别给 Loader 传入参数。

module: {
  rules: [
    {
      // 命中 JavaScript 文件
      test: /\.js$/,
      // 用 babel-loader 转换 JavaScript 文件
      // ?cacheDirectory 表示传给 babel-loader 的参数，用于缓存 babel 编译结果加快重新编译速度
      use: ['babel-loader?cacheDirectory'],
      // 只命中src目录里的js文件，加快 Webpack 搜索速度
      include: path.resolve(__dirname, 'src')
    },
    {
      // 命中 SCSS 文件
      test: /\.scss$/,
      // 使用一组 Loader 去处理 SCSS 文件。
      // 处理顺序为从后到前，即先交给 sass-loader 处理，再把结果交给 css-loader 最后再给 style-loader。
      use: ['style-loader', 'css-loader', 'sass-loader'],
      // 排除 node_modules 目录下的文件
      exclude: path.resolve(__dirname, 'node_modules'),
    },
    {
      // 对非文本文件采用 file-loader 加载
      test: /\.(gif|png|jpe?g|eot|woff|ttf|svg|pdf)$/,
      use: ['file-loader'],
    },
  ]
}

optimization.splitChunks.cacheGroups 将公共文件分包处理；

multiple 打包替换问题？？？？？

学习到打包到getWebpackConfig

apply 中 ompiler.hooks.emit.tap('appThemePlugin', compilation=>{}) 回调中compilation 包含所有的资源 Object.keys(compilation.assets).forEach(asset => { // 中间有 asset ，对应的文件链接 let source = compilation.assets[asset].source(); // source 对应文件里所有的字符串资源; if (asset.indexOf('.css') > -1 && !this.hasExcudesPath(asset)) { let css = this.filterCSSMainColor(source); if (css) { themeCSS.push(css); } }
```
 if (asset.indexOf('.html') > -1 && !this.hasExcudesPath(asset)) {
   compilation.assets[asset] = this.insertThemeJStoHead(source);
 }
```
});

http-proxy-middleware用于后台将请求转发给其它服务器。

lowdw 读取本地JSON

gulp 是 task runner，Webpack 是 module bundler。
Gulp就像是一个产品的流水线，整个产品从无到有，都要受流水线的控制，在流水线上我们可以对产品进行管理 ; 2.1 基于文件 stream 的构建
Webpack类似于一个模块打包机可以将许多松散的模块按照依赖和规则打包成符合生产环境部署的前端资源。体现出的意义就是：一切皆模块通过 loader的转换，任何形式的资源都可以视作模块，比如 CommonJs 模块、AMD 模块、ES6 模块、CSS、图片、JSON、Coffeescript、LESS 等。 3.1 按照模块的依赖构建目标文件； 3.2 loader 体系支持不同的模块； 3.3 插件体系提供更多额外的功能；

// 对比区别： Gulp侧重于前端开发的整个过程的控制管理（像是流水线），我们可以通过给gulp配置不通的task（通过Gulp中的gulp.task()方法配置，比如启动server、sass/less预编译、文件的合并压缩等等）来让gulp实现不同的功能，从而构建整个前端开发流程。 Webpack有人也称之为模块打包机，由此也可以看出Webpack更侧重于模块打包，当然我们可以把开发中的所有资源（图片、js文件、css文件等）都可以看成模块，最初Webpack本身就是为前端JS代码打包而设计的，后来被扩展到其他资源的打包处理。Webpack是通过loader（加载器）和plugins（插件）对资源进行处理的。

https://github.com/ruanyf/webpack-demos

# webpack 四个重要的核心概念