webpack学习（2）

前面一章我们简单的介绍了一下webpack的四个核心概念，现在我们利用这篇文章详细的了解下。

1. 入口起点(Entry Points)

前面说过entry是规定webpack的入口文件。

• 单个入口语法
  用法：entry: string|Array**

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

//原本的写法
const config = {
  entry: {
    main: './path/to/my/entry/file.js'
  }
};
module.exports = config;

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

• 对象语法
  用法：entry: {[entryChunkName: string]: string|Array} **

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

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

• 常见场景

分离 应用程序(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'
  }
};

2.输出(Output)

配置 output 选项可以控制 webpack 如何向硬盘写入编译文件。注意，即使可以存在多个入口起点，但只指定一个输出配置。

• 用法
  在 webpack 中配置 output 属性的最低要求是，将它的值设置为一个对象，包括以下两点：
  • filename 用于输出文件的文件名。
  • 目标输出目录 path 的绝对路径。

const config = {
  output: {
    filename: 'bundle.js',
    path: '/home/proj/public/assets'
  }
};

module.exports = config;

• 多个入口起点

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

// 写入到硬盘：./dist/app.js, ./dist/search.js

• 高级进阶

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

在编译时不知道最终输出文件的 publicPath 的情况下，publicPath 可以留空，并且在入口起点文件运行时动态设置。如果你在编译时不知道 publicPath，你可以先忽略它，并且在入口起点设置 webpack_public_path。

__webpack_public_path__ = myRuntimePublicPath

// 剩余的应用程序入口

3.Loader

loader是用于对源代码进行转换，可以使你在import或者require模块时预处理文件。loader可以将文件从不同语言转换为JavaScript，或者将内联图像转为DATA URL，或者可以在JavaScript模块中import样式文件。

• 使用loader
  这里就主要介绍配置的方法来使用loader，如下：

  module: {
     rules: [
        {
          test: /\.css$/,
          use: [
            { loader: ['style-loader'](https://doc.webpack-china.org/loaders/style-loader) },
            {
              loader: ['css-loader'](https://doc.webpack-china.org/loaders/css-loader),
              options: {
                modules: true
            }
          }
        ]
      }
    ]
  }

4.插件

webpack 插件是一个具有 apply
属性的 JavaScript 对象。apply
属性会被 webpack compiler 调用，并且 compiler 对象可在整个编译生命周期访问。

function ConsoleLogOnBuildWebpackPlugin() {

};

ConsoleLogOnBuildWebpackPlugin.prototype.apply = function(compiler) {
  compiler.plugin('run', function(compiler, callback) {
    console.log("webpack 构建过程开始！！！");

    callback();
  });
};

• 用法
  由于插件可以携带参数/选项，你必须在 webpack 配置中，向 plugins属性传入 new实例。根据你的 webpack 用法，这里有多种方式使用插件。

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)$/,
        use: 'babel-loader'
      }
    ]
  },
  plugins: [
    new webpack.optimize.UglifyJsPlugin(),
    new HtmlWebpackPlugin({template: './src/index.html'})
  ]
};

module.exports = config;