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

Entry(入口)

webpack创建了一个程序应用依赖图表。这个图表的起点是entryentry告诉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还提供了很多其他的插件

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

posted on 2017-03-23 23:40  墨白__六毛  阅读(155)  评论(0编辑  收藏  举报