webpack初级进化

webpack中文网是我见过的最好的api展示网站：webpack官网
指南（入门教程）+概念+配置+API+loaders+plugins
初学者无需看任何其他教程直接看官网的就好，这里简单记录我的汇总

webpack简述：webpack 是一个现代 JavaScript 应用程序的静态模块打包器(module bundler)。当 webpack 处理应用程序时，它会递归地构建一个依赖关系图(dependency graph)，其中包含应用程序需要的每个模块，然后将所有这些模块打包成一个或多个 bundle

• • • • • • • 先看webpack详细配置

const path = require('path');

module.exports = {
  mode: "production", // "production" | "development" | "none"  // Chosen mode tells webpack to use its built-in optimizations accordingly.

  entry: "./app/entry", // string | object | array  // 这里应用程序开始执行
  // webpack 开始打包

  output: {
    // webpack 如何输出结果的相关选项

    path: path.resolve(__dirname, "dist"), // string
    // 所有输出文件的目标路径
    // 必须是绝对路径（使用 Node.js 的 path 模块）

    filename: "bundle.js", // string    // 「入口分块(entry chunk)」的文件名模板（出口分块？）

    publicPath: "/assets/", // string    // 输出解析文件的目录，url 相对于 HTML 页面

    library: "MyLibrary", // string,
    // 导出库(exported library)的名称

    libraryTarget: "umd", // 通用模块定义    // 导出库(exported library)的类型

    /* 高级输出配置（点击显示） */  },

  module: {
    // 关于模块配置

    rules: [
      // 模块规则（配置 loader、解析器等选项）

      {
        test: /\.jsx?$/,
        include: [
          path.resolve(__dirname, "app")
        ],
        exclude: [
          path.resolve(__dirname, "app/demo-files")
        ],
        // 这里是匹配条件，每个选项都接收一个正则表达式或字符串
        // test 和 include 具有相同的作用，都是必须匹配选项
        // exclude 是必不匹配选项（优先于 test 和 include）
        // 最佳实践：
        // - 只在 test 和 文件名匹配 中使用正则表达式
        // - 在 include 和 exclude 中使用绝对路径数组
        // - 尽量避免 exclude，更倾向于使用 include

        issuer: { test, include, exclude },
        // issuer 条件（导入源）

        enforce: "pre",
        enforce: "post",
        // 标识应用这些规则，即使规则覆盖（高级选项）

        loader: "babel-loader",
        // 应该应用的 loader，它相对上下文解析
        // 为了更清晰，`-loader` 后缀在 webpack 2 中不再是可选的
        // 查看 webpack 1 升级指南。

        options: {
          presets: ["es2015"]
        },
        // loader 的可选项
      },

      {
        test: /\.html$/,
        test: "\.html$"

        use: [
          // 应用多个 loader 和选项
          "htmllint-loader",
          {
            loader: "html-loader",
            options: {
              /* ... */
            }
          }
        ]
      },

      { oneOf: [ /* rules */ ] },
      // 只使用这些嵌套规则之一

      { rules: [ /* rules */ ] },
      // 使用所有这些嵌套规则（合并可用条件）

      { resource: { and: [ /* 条件 */ ] } },
      // 仅当所有条件都匹配时才匹配

      { resource: { or: [ /* 条件 */ ] } },
      { resource: [ /* 条件 */ ] },
      // 任意条件匹配时匹配（默认为数组）

      { resource: { not: /* 条件 */ } }
      // 条件不匹配时匹配
    ],

    /* 高级模块配置（点击展示） */  },

  resolve: {
    // 解析模块请求的选项
    // （不适用于对 loader 解析）

    modules: [
      "node_modules",
      path.resolve(__dirname, "app")
    ],
    // 用于查找模块的目录

    extensions: [".js", ".json", ".jsx", ".css"],
    // 使用的扩展名

    alias: {
      // 模块别名列表

      "module": "new-module",
      // 起别名："module" -> "new-module" 和 "module/path/file" -> "new-module/path/file"

      "only-module$": "new-module",
      // 起别名 "only-module" -> "new-module"，但不匹配 "only-module/path/file" -> "new-module/path/file"

      "module": path.resolve(__dirname, "app/third/module.js"),
      // 起别名 "module" -> "./app/third/module.js" 和 "module/file" 会导致错误
      // 模块别名相对于当前上下文导入
    },
    /* 可供选择的别名语法（点击展示） */
    /* 高级解析选项（点击展示） */  },

  performance: {
    hints: "warning", // 枚举    maxAssetSize: 200000, // 整数类型（以字节为单位）
    maxEntrypointSize: 400000, // 整数类型（以字节为单位）
    assetFilter: function(assetFilename) {
      // 提供资源文件名的断言函数
      return assetFilename.endsWith('.css') || assetFilename.endsWith('.js');
    }
  },

  devtool: "source-map", // enum  // 通过在浏览器调试工具(browser devtools)中添加元信息(meta info)增强调试
  // 牺牲了构建速度的 `source-map' 是最详细的。

  context: __dirname, // string（绝对路径！）
  // webpack 的主目录
  // entry 和 module.rules.loader 选项
  // 相对于此目录解析

  target: "web", // 枚举  // 包(bundle)应该运行的环境
  // 更改 块加载行为(chunk loading behavior) 和 可用模块(available module)

  externals: ["react", /^@angular\//],  // 不要遵循/打包这些模块，而是在运行时从环境中请求他们

  stats: "errors-only",  // 精确控制要显示的 bundle 信息

  devServer: {
    proxy: { // proxy URLs to backend development server
      '/api': 'http://localhost:3000'
    },
    contentBase: path.join(__dirname, 'public'), // boolean | string | array, static file location
    compress: true, // enable gzip compression
    historyApiFallback: true, // true for index.html upon 404, object for multiple paths
    hot: true, // hot module replacement. Depends on HotModuleReplacementPlugin
    https: false, // true for self-signed, object for cert authority
    noInfo: true, // only errors & warns on hot reload
    // ...
  },

  plugins: [
    // ...
  ],
  // 附加插件列表


  /* 高级配置（点击展示） */}

一、四个核心

• entry 入口
• output 输出
• loader 加载器
• plugins 插件

1、entry（webpack工作伊始）

入口起点(entry point)指示 webpack 应该使用哪个模块，来作为构建其内部依赖图的开始。
entry配置有三种方式

1. 字符串（入口 文件路径）（单入口）

const config = {
  entry: './path/to/my/entry/file.js'
};

2. 数组（多入口，数组长度为1是是单入口）

entry: ['.src//main.js','./src/index.js']

应用场景：多个依赖文件一起注入，并且将它们的依赖导向(graph)到一个chunk

3. 对象（多页面应用程序，对象只有条数据是为单页面应用程序）

entry:{
    name:'./src/name.js',
    index:'./src/index.js'
}

2、ouput（文件打完包存放路径）

• filename： 用于输出文件的文件名。
• path：目标输出目录 path 的绝对路径。

单入口时：

  output: {
    filename: 'bundle.js',
    path: './dist'
  }

多入口时：
如果配置创建了多个单独的 “chunk”，则应该使用占位符(substitutions)来确保每个文件具有唯一的名称

{
  entry: {
    app: './src/app.js',
    search: './src/search.js'
  },
  output: {
    filename: '[name].js',
    path: __dirname + '/dist'
  }
}

3、loader(文件加载器)

loader的作用是预处理文件，ta有很多功能

1. 文件转换，可以将图片转成base64的dataURl
2. 预处理文件，将ts转换为js
3. 允许webpack打包除js文件外的任何静态文件（需要配置响应的loader）
4. and so on…

配置

首先要先引入相应的loader

npm install --save-dev css-loader
npm install --save-dev ts-loader

webpack配置

module.exports = {
  module: {
    rules: [
      { test: /\.css$/, use: 'css-loader' },
      { test: /\.ts$/, use: 'ts-loader' }
    ]
  }
};

常见loader及分类 (webpak官网loaders 所有loaders）

1. 处理文件类 : raw-loader val-loader url-loader file-loader
2. 处理json : json-loader json5-loader cson-loader
3. 转换编译 : script-loader babel-loader ts-loader coffee-script
4. 模板类： html-loader markdown-loader markup-inline-loader
5. 样式： style-loader css-loader less-loader sass-loader
6. 清理测试： eslint-loader jshint-loader cover-loader
7. 框架： vue-loader angular2-template-loader

4、plugins（插件）

拓展的插件决定了webpack有哪些功能

常用webpack内置插件

• HtmlWebpackPlugin 简单创建html用于浏览器访问
• UglifyWebpackPlugin 压缩文件
• CommonWebpackPlugin 提供chunks之间共享的通用模板
• DefineWebpackPlugin 编译时配置全局变量（process.env）
• IgnoreWebpackPlugin 从bundle中排除某些模块
• SourceMapWebpackPlugin 对sourcemap进行更细粒度的控制
• ExtractTextPlugin 从 bundle 中提取文本（CSS）到单独的文件
• HotModuleReplacementPlugin 启用热更新（HMR）

更多第三方插件，awesome wepack

二、其他配置

1、 mode（模式)

作用：

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

development

会将 process.env.NODE_ENV 的值设为 development。启用 NamedChunksPlugin 和 NamedModulesPlugin。

production

会将 process.env.NODE_ENV 的值设为 production。启用 FlagDependencyUsagePlugin, FlagIncludedChunksPlugin, ModuleConcatenationPlugin, NoEmitOnErrorsPlugin, OccurrenceOrderPlugin, SideEffectsFlagPlugin 和 UglifyJsPlugin

使用：

一般使用建立生产环境和开发环境两个config文件分别配置

1、 开发环境

// webpack.development.config.js
module.exports = {
+ mode: 'development'
- plugins: [
-   new webpack.NamedModulesPlugin(),
-   new webpack.DefinePlugin({ "process.env.NODE_ENV": JSON.stringify("development") }),
- ]
}

2、生产环境

// webpack.production.config.js
module.exports = {
+  mode: 'production',
-  plugins: [
-    new UglifyJsPlugin(/* ... */),
-    new webpack.DefinePlugin({ "process.env.NODE_ENV": JSON.stringify("production") }),
-    new webpack.optimize.ModuleConcatenationPlugin(),
-    new webpack.NoEmitOnErrorsPlugin()
-  ]
}

2、module
这些选项决定了如何处理项目中的不同类型的模块。

• module.noParse

防止 webpack 解析那些任何与给定正则表达式相匹配的文件。忽略的文件中不应该含有 import, require, define 的调用，或任何其他导入机制。忽略大型的 library 可以提高构建性能。

// 从 webpack 3.0.0 开始
noParse: function(content) {
  return /jquery|lodash/.test(content);
}

• module.rules

创建模块时，匹配请求的规则数组。这些规则能够修改模块的创建方式。这些规则能够对模块(module)应用 loader，或者修改解析器(parser)。
每个规则可以分为三部分 - 条件(condition)，结果(result)和嵌套规则(nested rule)。

  rules: [
      {
        test: /\.vue$/,
        loader: 'vue-loader',
        options: vueLoaderConfig
      },
      {
        test: /\.js$/,
        loader: 'babel-loader',
        include: [resolve('src'), resolve('test')]
      },
      {
        test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
        loader: 'url-loader',
        query: {
          limit: 10000,
          name: utils.assetsPath('img/[name].[hash:7].[ext]')
        }
      },

3、 resolve
alias 创建 import 或 require 的别名，来确保模块引入变得更简单
(1) 配置

alias: {
  @: path.resolve(__dirname, 'src/utilities/')
}

(2) 使用

import Utility from '@/utility';

4、server

devServer(更多webpack-dev-server配置)

通过来自 webpack-dev-server 的这些选项，能够用多种方式改变其行为

devServer: {
  contentBase: path.join(__dirname, "dist"),
  compress: true,
  port: 9000,
  proxy: {
	  "/api": {
	    target: "http://localhost:3000",
	    pathRewrite: {"^/api" : ""}
	  }
	}
}

5、devTool
此选项控制是否生成，以及如何生成 source map。

devtool: '#cheap-module-eval-source-map'

配置的构建速度，打包品质对比

大致常用到的这些，在后期学习中用到的继续更新