webpack的核心概念

webpack是先进js应用的模块打包工具，它非常容易配置。在开始之前，需要掌握四个核心概念。

Entry（入口）

webpack创建了一个程序应用依赖图表。这个图表的起点是entry。entry告诉webpack从哪开始以及遵循怎样的依赖去打包文件。

在webpack中，在配置文件中使用entry属性定义entry。

下面是一个简单的例子：

module.exports = {
    entry: './dev/entry.js'
};

当然，根据你的应用需求，还有很多的方法来生命entry属性。学习更多

Output（输出）

在将所有的文件绑定后，还需要一个存放的绑定好文件的地方。output属性告诉webpack怎样对待绑定好的代码。

下面是一个简单的例子：

const path = require('path');

module.exports = {
    entry: './dev/entry.js',
    output: {
        path: path.resolve(__dirname,  'dist'),   //目录
        filename: 'bundle.js'                     //输出文件名
    }
}

output属性也有很多的配置特性，学习更多。

Loaders（加载器）

loaders的目标是将项目中的所有文件变成webpack的事情，而不是浏览器的。（这并不意味着必须把所有文件打包在一起）。webpack将所有的文件（包括css、html、scss、图片等等）看成模块，但是webpack默认只能解析js。

当需要webpack解析除了js外的文件时，需要使用loaders。loaders将文件转成依赖图表所需要的模块。

在webpack配置中，loaders有两个目的：

1. 确认某种文件需要转换（test属性）
2. 转化文件成依赖图表需要的模块（use属性）

const path = require('path');

module.exports = {
    entry: './dev/entry.js',
    output: {
        path: path.resolve(__dirname,  'dist'),   //目录
        filename: 'bundle.js'                     //输出文件名
    },
    module: {
        rules: [
            {
                test: /.(js|jsx)&/,
                use: 'babel-loader'
            }
        ]
    }
}                                                

上面代码的rules属性的定义告诉webpack解析器：

    当解析器遇到文件中带有'.js'或者'.jsx'的文件时，在把它打包前使用babel-loader进行转换。

注意：必须将rules定义在module属性里面，否则webpack会报错。

学习更多

Plugins（插件）

由于Loaders针对的是每个文件的转换操作，plugins有更多的操作。webpack的Plugin是强大以及可自定义的，参见api。

使用插件，只需要require()它以及将它添加plugins数组里面。很多插件可以通过options自定义。由于你可以在一个配置里面出于不同的目的使用同一插件，你可以通过new创建一个插件的实例。

下面是一个简单的例子：

const path = require('path');
const webpack = require('webpack');   //获取内置的插件
const HtmlWebpackPlugin = require('html-webpack-plugin'); //通过npm安装
module.exports = {
    entry: './dev/entry.js',
    output: {
        path: path.resolve(__dirname,  'dist'),   //目录
        filename: 'bundle.js'                     //输出文件名
    },
    module: {
        rules: [
            {
                test: /.(js|jsx)&/,
                use: 'babel-loader'
            }
        ]
    },
    plugins: [
        new webpack.optimize.UglifyJsPlugin(),
        new HtmlWebpackPlugin({template: './src/index.html'})       
        
    ]
}

webpack还提供了很多其他的插件。

上面看到，使用插件是很容易的；然而，还有很多其他的深层次的使用案例，学习更多。