webpack学习笔记(一) 核心概念

这篇文章我们先来简单看看 webpack 中几个的核心概念，并粗略学习一下配置文件的写法

1、mode

webpack 有两种常见的模式，一种是 development（开发模式），一种是 production（生产模式）

两种模式下都有对应的 webpack 内置优化

在 development 模式下，process.env.NODE_ENV 的值将被设置为 development

// webpack.development.config.js

module.exports = {
	mode: 'development'
}

在 production 模式下，process.env.NODE_ENV 的值将被设置为 production

// webpack.production.config.js

module.exports = {
	mode: 'production'
}

2、entry

entry 是 webpack 构建模块依赖图的起点

webpack 会递归地寻找这个入口文件依赖的所有模块，并根据这些依赖关系构建出一个模块依赖图

// webpack.config.js
// 单个入口文件的简写语法

module.exports = {
    entry: './src/index.js' // entry 属性指定入口文件路径
};

我们还能指定多个入口文件（这是一种可拓展的方式）

对于每个入口文件，webpack 都会构建一个模块依赖图，这些依赖图是彼此分离、相互独立的

// webpack.config.js
// 多个入口文件的对象语法

module.exports = {
    entry: {
        app: './src/app.js',
        vendors: './src/vendors.js'
    }
};

3、output

output 是 webpack 打包之后输出的文件

当 webpack 对一个入口文件构建好模块依赖图后，它会将所有模块打包成一个或多个文件输出

// webpack.config.js

module.exports = {
    entry: './src/index.js',
    output: { // output 属性指定打包之后的文件放在什么位置
        // filename 属性指定输出文件的文件名称
        filename: 'bundle.js',
        // path 属性指定输出目录的绝对路径
        path: '/dist'
    }
};

对于多个入口文件情况，output 也只能指定一个输出配置

此时应该使用 占位符 来确保每个文件具有唯一的名称

// webpack.config.js

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

4、loader

loader 用于对模块的源代码进行转换

因为 webpack 只能理解 JavaScript，所以需要 loader 将其它类型的文件转化为 webpack 能够处理的有效模块

不同的 loader 完成不同的任务，下面的例子指定使用 style-loader 和 css-loader 处理 CSS 文件

// webpack.config.js

module.exports = {
    entry: './src/index.js',
    output: {
        filename: 'bundle.js',
        path: '/dist'
    },
    module: {
        // rules 属性用于定义处理规则
        // 它是一个数组，其中的每一个项是一个对象，定义一条处理规则
        rules: [
            {
                // test 属性用于标识应该处理哪些文件
                // 它可以是一个正则表达式
                test: /\.css$/,
                // use 属性用于指定应该使用哪些 loader
                // 它是一个数组，其中的每一个项是一个对象，指定一个 loader
                use: [
                    {
                        // 需要安装 style-loader
                        // npm install --save-dev style-loader
                        loader: 'style-loader'
                    },
                    {
                        // 需要安装 css-loader
                        // npm install --save-dev css-loader
                        loader: 'css-loader',
                        options: { // options 属性用于传入额外的配置
                        	modules: true
                        }
                    }
                ]
            }
        ]
    }
}

5、plugin

plugin 用于处理一些拓展任务，从打包优化和压缩，一直到重新定义环境中的变量

// webpack.config.js

// 内置插件
const webpack = require('webpack')
// 外部插件，需要通过 npm 安装
const HtmlWebpackPlugin = require('html-webpack-plugin')

module.exports = {
    entry: './src/index.js',
    output: {
        filename: 'bundle.js',
        path: '/dist'
    },
    module: {
        rules: [
            {
                test: /\.(js|jsx)$/,
                use: 'babel-loader'
            }
        ]
    },
    plugins: [
        // 由于插件可以携带参数，所以我们需要传入一个 new 实例
        new webpack.optimize.UglifyJsPlugin(),
        new HtmlWebpackPlugin({template: './src/index.html'})
    ]
}