webpack foundation

webpack.config.js解析

1 entry

entry 对象是用于 webpack 查找启动并构建 bundle。其上下文是入口文件所处的目录的绝对路径的字符串。

1	context: path.resolve(__dirname, "app")

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

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

2 output `object`

output对象

const config = {
  output: {
    filename: 'bundle.js',
    path: __dirname+'/build/'
  }
};
module.exports = config;

注意output.path提供打包后的文件存放的绝对路径地址 ; output.filename提供了打包后文件的名字;

3 module

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

loader 用于对模块的源代码进行转换。loader 可以使你在 require() 或”加载”模块时预处理文件。因此，loader 类似于其他构建工具中“任务(task)”，并提供了处理前端构建步骤的强大方法。loader 可以将文件从不同的语言（如 TypeScript）转换为 JavaScript，或将内联图像转换为 data URL。loader 甚至允许你在 JavaScript 中 require（） CSS文件！

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

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

如何使用loaders有以下三种方式

通过配置
在 require 语句中显示使用
通过 CLI

通过 webpack.config.js

module.rules 允许你在 webpack 配置中指定几个 loader。这是展示 loader 的一种简明的方式，并且有助于使代码变得简洁。而且对每个相应的 loader 有一个完整的概述。

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

通过 require

可以在 require 语句（或 define, require.ensure, 等语句）中指定 loader。使用 ! 将资源中的 loader 分开。分开的每个部分都相对于当前目录解析。

1	require('style-loader!css-loader?modules!./styles.css');

通过前置所有规则及使用 !，可以对应覆盖到配置中的任意 loader。

选项可以传递查询参数，就像在 web 中那样（?key=value&foo=bar）。也可以使用 JSON 对象（?{"key":"value","foo":"bar"}）。

尽可能使用 module.rules，因为这样可以在源码中减少引用，并且可以更快调试和定位 loader，避免代码越来越糟。

通过 CLI

可选项，你也可以通过 CLI 使用 loader：

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

这会对 .jade 文件使用 jade-loader，对 .css 文件使用 style-loader 和 css-loader

4 plugins

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

根据你如何使用 webpack，这里有多种方式使用插件。

//webpack.config.js
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: {
    filename: 'my-first-webpack.bundle.js',
    path: path.resolve(__dirname, 'dist')
  },
  module: {
    loaders: [
      {
        test: /\.(js|jsx)$/,
        loader: 'babel-loader'
      }
    ]
  },
  plugins: [
    new webpack.optimize.UglifyJsPlugin(),
    new HtmlWebpackPlugin({template: './src/index.html'})
  ]
};
module.exports = config;

5 target

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

高速webpack这个程序的目标环境是什么

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

//webpack.config.js
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 ];

target描述

async-node编译为类 Node.js 环境可用（使用 fs 和 vm 异步加载分块）

~~atom~~electron-main 的别名

electron``electron-main 的别名

electron-main编译为 Electron 渲染进程，使用 JsonpTemplatePlugin, FunctionModulePlugin 来为浏览器环境提供目标，使用 NodeTargetPlugin 和 ExternalsPlugin 为 CommonJS 和 Electron 内置模块提供目标。

node编译为类 Node.js 环境可用（使用 Node.js require 加载 chunk）

node-webkit编译为 Webkit 可用，并且使用 jsonp 去加载分块。支持 Node.js 内置模块和 nw.gui 导入（实验性质）

web编译为类浏览器环境里可用（默认）

webworker编译成一个 WebWorker

例如，当 target 设置为 "electron"，webpack 引入多个 electron 特定的变量。有关使用哪些模板和 externals 的更多信息，你可以直接参考 webpack 源码。

6 命令

如果存在 webpack.config.js，webpack 命令将默认选择使用它
通过npm配合使用,改变package.json文件

"scripts": {
  "example": "babel-node"
},
  //可以通过  npm run example   执行   babel-node命令

或者

"scripts": {
   "build": "webpack"
 },
   // 可以通过  npm run build  执行 webpack 命令