webpack 模块打包器

webpack的入门概念

概念

webpack是现代Javascript应用程序的模块打包器。当webpack处理程序时，它会递归地构建一个依赖关系图，其中包含应用程序需要的每个模块，然后将这些模块打包成一个或多个bundle。webpack的配置可在webpack.config.js文件进行设置。

四个核心概念：

· 入口文件 -- entry

· 出口文件 -- output

· loader

· 插件模块 -- plugins

1.入口(entry)

entry指示webpack应该使用哪个模块，作为内部依赖图的开始。entry属性，可以指定一个或多个入口起点。

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

2.出口(output)

output属性告诉webpack在哪里输出它所创建的bundles，以及如何命名这些文件。

const path = require('path');

module.exports = {
  entry: './path/to/my/entry/file.js',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'my-first-webpack.bundle.js'
  }
};

3.loader

loader让webpack去处理一些非javascript的文件。loader可将所有类型的文件，转换为应用程序的依赖图可直接引用的模块。

const path = require('path');

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

module.exports = config;

4.插件 -- plugins

loader用于转换某些类型的模块，而插件则可以用于执行范围更广的任务。插件的范围包括，从打包优化到压缩，一直到重新定义环境中的变量。

想要使用一个插件，只需require()即可，然后将其添加到plugins数组中。

const HtmlWebpackPlugin = require('html-webpack-plugin'); // 通过 npm 安装
const webpack = require('webpack'); // 用于访问内置插件
const path = require('path');

const config = {
  entry: './path/to/my/entry/file.js',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'my-first-webpack.bundle.js'
  },
  module: {
    rules: [
      { test: /\.txt$/, use: 'raw-loader' }
    ]
  },
  plugins: [
    new webpack.optimize.UglifyJsPlugin(),
    new HtmlWebpackPlugin({template: './src/index.html'})
  ]
};

module.exports = config;

入口文件

1.entry的语法：

entry： string | Array<string>

2.单入口语法

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

module.exports = config;

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

3.多入口语法

entry: {[entryChunkName(String)]: String | Array<string> }

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

4.常见场景

分离 应用程序(app)和第三方库(vendor)入口

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

多页面应用程序

const config = {
  entry: {
    pageOne: './src/pageOne/index.js',
    pageTwo: './src/pageTwo/index.js',
    pageThree: './src/pageThree/index.js'
  }
};

输出文件

1. output语法

output: {

filename: String, //用于输出文件的文件名。

path: String  //目标输出目录 path 的绝对路径。

}

2. 单入口文件

const config = {
  output: {
    filename: 'bundle.js',
    path: '/home/proj/public/assets' 
    //此配置将一个单独的bundle.js文件输出到 /home/proj/public/assets目录下
 }};module.exports = config;

3. 多口文件

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

4. 高级进阶

使用CDN和资源hash

output: {
  path: "/home/proj/cdn/assets/[hash]",
  publicPath: "http://cdn.example.com/assets/[hash]/"
}

Loader

loader 用于对模块的源代码进行转换。loader可以使你在 import或加载模块时进行预处理文件。因此loader类似于其他构建工具中的任务(task)。

1. 指定loader的方式：(三种使用loader的方式)

· 配置文件（推荐）: 在webpack.config.js文件中指定loader

· 内联：在每个import语句中显式指定loader

· CLI（命令）: 在命令中指定loader

2. 配置文件中

module: {
    rules: [
      {
        test: /\.css$/,
        use: [
          { loader: 'style-loader' },
          {
            loader: 'css-loader',
            options: {
              modules: true
            }
          }
        ]
      }
    ]
  }

3. 内联

使用 ！ 将资源中的loader分开。

import Styles from 'style-loader!css-loader?modules!./styles.css';

注意: 尽可能使用module.rules ，因为这样可以减少源码中的代码量，并且可以在出错时，更快地调试和定位loader中的问题。

4.CLI

webpack --module-bind jade-loader --module-bind 'css=style-loader!css-loader'

.jade文件使用jade-loader进行解析，.css文件使用style-loader和css-loader进行解析。

5. Loader特性

• loader 支持链式传递。能够对资源使用流水线(pipeline)。一组链式的 loader 将按照先后顺序进行编译。loader 链中的第一个 loader 返回值给下一个 loader。在最后一个 loader，返回 webpack 所预期的 JavaScript。
• loader 可以是同步的，也可以是异步的。
• loader 运行在 Node.js 中，并且能够执行任何可能的操作。
• loader 接收查询参数。用于对 loader 传递配置。
• loader 也能够使用 options 对象进行配置。
• 除了使用 package.json 常见的 main 属性，还可以将普通的 npm 模块导出为 loader，做法是在 package.json 里定义一个 loader 字段。
• 插件(plugin)可以为 loader 带来更多特性。
• loader 能够产生额外的任意文件。

插件（Plugins）

插件目的在于解决loader无法实现的其他事。

1. 用法

由于插件可以携带参数/选项，必须在webpack配置中，向plugins属性传入new实例。

plugins: [
    new webpack.optimize.UglifyJsPlugin(),
    new HtmlWebpackPlugin({template: './src/index.html'})
  ]

2. 参数

plugins: [
        new htmlWebpackPlugin({
            template: 'index.html',
            filename: 'index.html',
            inject: 'body',
            title: '我是webpack.config.js设置的标题!',
            date: new Date(),
            minify:{
                collapseWhitespace: true,
                removeComments: true
            }
        }), /*初始化html*/
    ]

配置

webpack配置是标准的Node.js CommonJS模块，能实现一下事情

• 通过 require(...) 导入其他文件
• 通过 require(...) 使用 npm 的工具函数
• 使用 JavaScript 控制流表达式，例如 ?: 操作符
• 对常用值使用常量或变量
• 编写并执行函数来生成部分配置

模块(Modules)

1. 模块的依赖关系

• ES2015 import 语句
• CommonJS require() 语句
• AMD define 和 require 语句
• css/sass/less 文件中的 @import 语句。
• 样式(url(...))或 HTML 文件(<img src=...>)中的图片链接(image url)

2. 支持的模块类型

webpack通过loader可以支持各种语言和预处理编写模块。loader描述了webpack如何处理非javascript模块，并在bundle中引入这些依赖。

CoffeeScript、TypeScript、ESNext(Babel)、Sass、Less、Stylus

3.webpack的模块解析规则

(1). 绝对路径

import "/home/me/file";

import "C:\\Users\\me\\file";

(2).相对路径

import "../src/file1";
import "./file2";

在这种情况下，使用import或require的资源文件所在的目录被认为是上下文目录。

在给定的绝对路径加上此上下文路径，则产生模块的绝对路径。

构建目标

因为服务器和浏览器代码都可以用javascript编写，所以webpack提供了多种构建目标(target),可在你的webpack进行设置。

1. 用法

设置target属性，只需在webpack配置中设置target的值

module.exports = {
  target: 'node'
};

使用node ,webpack会编译为用于【类Node.js】环境

2.多个target

尽管 webpack 不支持向 target 传入多个字符串，你可以通过打包两份分离的配置来创建同构的库

var path = require('path');
var serverConfig = {
  target: 'node',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'lib.node.js'
  }
  //…
};

var clientConfig = {
  target: 'web', // <=== 默认是 'web'，可省略
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'lib.js'
  }
  //…
};

module.exports = [ serverConfig, clientConfig ];