# Webpack4.0

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)

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

  • development:会将process.env.NODE_ENV的值设为development。启用NamedChunksPluginNamedModulesPlugin

  • production:会将process.env.NODE_ENV的值设为production。启用FlagDependencyUsagePlugin,FlagIncludedChunksPlugin,ModuleConcatenationPlugin,NoEmitOnErrorsPlugin,OccurrenceOrderPlugin,SideEffectsFlagPluginUglifyJsPlugin.

# 安装

yarn add -D webpack webpack-cli