Webpack 基本概念

Webpack 是一个现代Javascript 应用程序的静态模块打包器（module bundler）。当webpack 处理应用程序时，它会递归地构建一个依赖图（dependency graph），其中包含应用程序的每个模块，然后将所有这些模块打包成一个或多个bundle。四个核心概念：入口、输出、loader、plugins

 

入口【entry】

入口起点指webpack 应用使用哪个模块，来作为构建其内部依赖图的开始。进入入口起点后，webpack 会找出找出有那些模块和库是入口起点（直接和间接）依赖的。起点可能有一个或者多个。

 

单个入口 用法：entry: string | Array<string>

module.exports = {

    entry: ‘.path/to/my/entery/file.js'

}

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

const config = {

    entry: {

        app: ‘./src/app.js’,

        vendors: ‘./src/vendors.js'

    }

}

 

出口【output】

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

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'

    }

}

 

多个入口起点，配置创建多个独立的“chunk”来确保每个文件具体的唯一名称

{

    entry:{

        app: ‘./src/app.js’,

        search: ‘./src/search.js'

    },

    output:{

        filename: ‘[name].js’,

        path: __dirname + ‘/dist'

    }

}

 

loader

loader 让webpack 能够去处理那些非JavaScript 文件（webpack 自身只能理解JavaScript）。webpack loader 将所有类型的文件，转换为应用程序的依赖图（和最终的bundle）可以直接引用的模块。

1. test 属性，用于识别出应该被应用的loader 进行转换的某个或某些文件
2. use 属性，表示进行转换时，应该使用哪个loader

const path = require(‘path')

 

const config = {

    output: {

        filename: ‘my-first-webpack.bundle.js'

    },

    Module:{

        rules:[

            { test: /\.txt$/, use: ‘raw-loader'}

        ]

    }

}

 

插件

loader 被用于转换某些类型的模块，而插件则可以用于执行范围更广的任务。插件的范围包括，从打包到压缩，一直到重新定义环境中的变量。插件接口功能及其强大，可以用来处理各种各样的任务。

const HtmlWebpackPlugin = require(‘html-webpack-plugin’)

const webpack = require(‘webpack’)

 

const config = {

    module: {

        rules:[

            {test: /\.txt$/, use:’raw-loader'}

        ]

    },

    plugins:[

        new HtmlWebpackPlugin({template: ‘./src/index.html'})

    ]

};

 

module.exports = config;

 

模式

提供mode 配置选项，告知webpack 使用相应模式的内置优化。通过选择development 或 production 之中的一个，来设置mode 参数。plugins 用于解决loader 无法实现的其他事。

module.exports = {

    mode: ‘production'

}