webpack整理

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

entry

output

loader

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

plugins

插件，对整个构建过程起作用。

是一个具有apply属性的JavaScript对象

const pluginName = 'ConsoleLogOnBuildWebpackPlugin';
class ConsoleLogOnBuildWebpackPlugin {
    apply(compiler) {
        compiler.hooks.run.tap(pluginName, compilation => {
            console.log("webpack 构建过程开始！");
        });
    }
}

常用插件

1. HtmlWebpackPlugin

   作用： 依据一个简单的index.html模板，自动生成一个自动引用打包后的js文件的新index.html

2. CommonsChunkPlugin

   作用： 提取公共代码，通过将公共模块提取出来，只在页面加载的时候引入一次，提升应用的加载效率。

3. UglifyJSPlugin

   作用：UglifyJSPlugin

webpack-dev-server