# Webpack4.0

TIP

webpack是一个现代JavaScript应用程序的静态模块打包器(module bundler)。当 webpack处理应用程序时，它会递归地构建一个依赖关系图(dependency graph)，其中包含应用程序需要的每个模块，然后将所有这些模块打包成一个或多个bundle。

核心概念：

入口(entry)
输出(output)
loader
插件(plugins)

# 入口(`entry`)

指定入口起点，默认值为./src。值可以为数组或者对象。

module.exports = {
    entry: './src/main.js'
}

1
2
3

# 出口(`output`)

告诉webpack在哪输出所创建的bundles，以及如何命名，默认值为./dist。

filename：用于输出的文件名
path：为目标输出目录的绝对路径
publicPath：使用CDN的路径

module.exports = {
    entry: './src/main.js',
    output: {
        path: path.resolve(__dirname, 'dist')
        filename: 'index.js'
    }
}

1
2
3
4
5
6
7

filename 加上hash，如bundle.[hash:6].js。

# `loader`

loader能够让webpack去处理那些非javascript文件。

test：用于标识应该被对应的loader进行转换的某个或某些文件。
use：转换时应该是用的loader

module.exports = {
    module: {
        rules: [
            {
                test: /\.js$/,
                use: 'babel-loader'
            }
        ]
    }
}

1
2
3
4
5
6
7
8
9
10

# 插件(`plugins`)

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

const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
    plugins: [
        new HtmlWebpackPlugin({
            template: './public/index.html'
        })
    ]
}

1
2
3
4
5
6
7
8
9

# 模式(`mode`)

通过选择development或production之中的一个，来设置mode参数，你可以启用相应模式下的 webpack 内置的优化。

development：会将process.env.NODE_ENV的值设为development。启用NamedChunksPlugin 和NamedModulesPlugin。
production：会将process.env.NODE_ENV的值设为production。启用FlagDependencyUsagePlugin,FlagIncludedChunksPlugin,ModuleConcatenationPlugin,NoEmitOnErrorsPlugin,OccurrenceOrderPlugin,SideEffectsFlagPlugin和UglifyJsPlugin.

# 安装

yarn add -D webpack webpack-cli

配置 →

# Webpack4.0

# 入口(entry)

# 出口(output)

# loader