【webpack】一步步的看webpack-3

好啦，详情完webpack究竟是干什么的以后呢，我们需要进入正题了，这篇主要详情webpack的几个重要的概念入口,出口，loader,插件plugins,模式

入口(entry point)

• 指示 webpack 应该使用哪个模块，来作为构建其内部依赖图的开始。进入入口起点后，webpack 会找出有哪些模块和库是入口起点（直接和间接）依赖的。每个依赖项随即被解决，最后输出到称之为 bundles 的文件中，
  可以通过在 webpack 配置中配置 entry 属性，来指定一个入口起点（或者多个入口起点）。默认值为 ./src。
  接下来我们看一个 entry 配置的最简单例子：
  webpack.config.js

  module.exports = {  entry: './path/to/my/entry/file.js'};

• 单个入口语法

  webpack.config.js

  const config = {  entry: './path/to/my/entry/file.js'  //此写法是下面的写法简写  <!-- entry: {    main: './path/to/my/entry/file.js'  } -->};module.exports = config;

  当你向 entry 传入一个数组时会发生什么？向 entry 属性传入「文件路径(file path)数组」将创立“多个主入口(multi-main entry)”。在你想要多个依赖文件一起注入，并且将它们的依赖导向(graph)到一个“chunk”时，传入数组的方式就很有用。

• 对象语法

  webpack.config.js

  const config = {  entry: {    app: './src/app.js',    vendors: './src/vendors.js'  }};

  对象语法会比较繁琐。然而，这是应用程序中定义入口的最可扩展的方式。

• 数组语法

  webpack.config.js

  const config = {  entry: ['./src/app.js','./src/vendors.js']};

  总结：上面关于对象和数组语法主要是面向多页面应用（MPA）的，在多页应用中，（译注：每当页面跳转时）服务器将为你获取一个新的 HTML 文档。页面重新加载新文档，并且资源被重新下载。然而，这给了我们特殊的机会去做很多事：使用 CommonsChunkPlugin（该插件主要作用就是通过将公共模块拆出来-多个入口情况下，最终合成的文件能够在最开始的时候加载一次） 为每个页面间的应用程序共享代码创立 bundle。因为入口起点增多，多页应用能够复用入口起点之间的大量代码/模块，从而可以极大地从这些技术中受益。

出口（output）

• output 属性告诉 webpack 在哪里输出它所创立的 bundles，以及如何命名这些文件，默认值为 ./dist。基本上，整个应用程序结构，都会被编译到你指定的输出路径的文件夹中。你可以通过在配置中指定一个 output 字段，来配置这些解决过程：
  webpack.config.js

  const path = require('path');module.exports = {  entry: './path/to/my/entry/file.js',  output: {    path: path.resolve(__dirname, 'dist'), //输出的路径,结合node的path模块    filename: 'my-first-webpack.bundle.js' //输出的文件名  }};

• output.filename
  这里单独说一下filename其余用法
  此选项决定了每个输出 bundle 的名称。这些 bundle 将写入到 output.path 选项指定的目录下。

对于单个入口起点，filename 会是一个静态名称。

filename: "bundle.js"

然而，当通过多个入口起点(entry point)、代码拆分(code splitting)或者各种插件(plugin)创立多个 bundle，应该使用以下一种替换方式，来赋予每个 bundle 一个唯一的名称……

使用入口名称：

filename: "[name].bundle.js"

使用内部 chunk id

filename: "[id].bundle.js"

使用每次构建过程中，唯一的 hash 生成，可以指定hash生成的长度如：[hash:8]

filename: "[name].[hash].bundle.js"

使用基于每个 chunk 内容的 hash：

filename: "[chunkhash].bundle.js"

由于 hash 是项目构建的哈希值，项目中假如有些变动，hash 肯定会变，比方说我改动了 utils.js 的代码，index.js 里的代码尽管没有改变，但是大家都是用的同一份 hash。hash 一变，缓存肯定失效了，这样子是没办法实现 CDN 和浏览器缓存的。

其余配置项

总结：上面是webpack的最基础的配置，输入和输出，当然这里引入了一个chunk的概念，chunk表示一个文件，默认情况下webpack的输入是一个入口文件，输出也是一个文件，这个文件就是一个chunk，chunkId就是产出时给每个文件一个唯一标识id，chunkhash就是文件内容的md5值，name就是在entry中指定的key值。

module.exports = {    entry: {        collection: './src/main.js'     // collection为chunk的名字，chunk的入口文件是main.js    },    output: {        path: './dist/js',        filename: '[name].[chunkhash].[hash:8].js'   // 输出到dist/js目录下，以collection+chunk内容的md5值作为输出的文件名    }};　　

以上输入输出会出现几个概念，下面做一下总结:

entry:{    main:['./src/main.js','./src/test.js'],    other:['./src.other.js']},output:{    filename:"[name].bundle.js"}

main.js中引入了gloabl.css；

• module

  • main.js、test.js、other.js、global.css都是module

• entry-point

  • main.js、test.js、other.js

• chunk

  • main
  • other

• bundle

  • main.bundle.js
  • other.bundle.js
    entry的两个key对应两个chunk，最终会输出两个bundle；main.js、test.js、other.js都是entry-point

loader

• loader 让 webpack 能够去解决那些非 JavaScript 文件（webpack 自身只了解 JavaScript）。loader 可以将所有类型的文件转换为 webpack 能够解决的有效模块，而后你即可以利用 webpack 的打包能力，对它们进行解决。
  本质上，webpack loader 将所有类型的文件，转换为应用程序的依赖图（和最终的 bundle）可以直接引用的模块。

在更高层面，在 webpack 的配置中 loader 有两个目标：

• test 属性，用于标识出应该被对应的 loader 进行转换的某个或者某些文件。

• use 属性，表示进行转换时，应该使用哪个 loader。
  webpack.config.js

  const path = require('path');const config = {  output: {    filename: 'my-first-webpack.bundle.js'  },  module: {    rules: [      { test: /\.txt$/, use: 'raw-loader' }    ]  }};module.exports = config;

  以上配置中，对一个单独的 module 对象定义了 rules 属性，里面包含两个必需属性：test 和 use。这告诉 webpack 编译器(compiler) 如下信息：

  “嘿，webpack 编译器，当你碰到「在 require()/import 语句中被解析为 '.txt' 的路径」时，在你对它打包之前，先使用 raw-loader 转换一下。”
  重要的是要记得，在 webpack 配置中定义 loader 时，要定义在 module.rules 中，而不是 rules。然而，在定义错误时 webpack 会给出严重的警告。为了使你受益于此，假如没有按照正确方式去做，webpack 会“给出严重的警告”

  插件(plugins)

  • loader 被用于转换某些类型的模块，而插件则可以用于执行范围更广的任务。插件的范围包括，从打包优化和压缩，一直到重新定义环境中的变量。插件接口功能极其强大，可以用来解决各种各样的任务。
    想要使用一个插件，你只要要 require() 它，而后把它增加到 plugins 数组中。多数插件可以通过选项(option)自己设置。你也可以在一个配置文件中由于不同目的而屡次使用同一个插件，这时需要通过使用 new 操作符来创立它的一个实例。
    webpack.config.js

  const HtmlWebpackPlugin = require('html-webpack-plugin'); // 通过 npm 安装const webpack = require('webpack'); // 用于访问内置插件const config = {  module: {    rules: [      { test: /\.txt$/, use: 'raw-loader' }    ]  },  plugins: [    new HtmlWebpackPlugin({template: './src/index.html'})  ]};module.exports = config;

  webpack 提供许多开箱可用的插件！查阅我们的插件列表获取更多信息。

模式

• 通过选择 development 或者 production 之中的一个，来设置 mode 参数，你可以启用相应模式下的 webpack 内置的优化

module.exports = {  mode: 'production'};

或者

webpack --mode=production