webpack进阶（二）

1）webpack动态打包所有依赖项，避免打包未使用的模块。

2）转换css的loader有：css-loader，style-loader，加载图片或文件的loader是：file-loader，如果要压缩和优化图像，使用image-webpack-loader和url-loader。

3）加载字体，file-loader也可以进行字体资源的处理，可以用于任何类型的文件：woff,woff2,eot,ttf,otf等，使用font-face进行字体的设置。

4）加载XML，CSV数据等，需要使用csv-loader,xml-loader。JSON支持是内置的，这个类似于NodeJS。

5）HtmlWebpackPlugin默认生成index.html文件，替换原来在dist文件下的index.html。

可以看出HtmlWebpackPlugin创建了一个全新的文件，所有的bundle会自动添加到html中。

6）webpack打包后的代码/dist文件夹下，但是webpack无法追踪哪些文件是实际项目中用到，需要在构建前清理/dist文件夹，clean-webpack-plugin是个管理插件，可以用来清理打包后文件夹中的旧文件。

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

module.exports  = {
    entry:{
        app:'./src/index.js',
        print:'./src/print.js'
    },
    mode:'production',
    output:{
        filename:'[name].bundle.js',
        path:path.resolve(__dirname,'dist')
    },
    plugins:[
        new HtmlWebpackPlugin({
            title:'Output Management'
        }),
        new CleanWebpackPlugin(['dist']),
    ]
}

重新npm run start后，可以看出以前的bundle.js等不用的文件重新被清理，然后新的依赖打包后文件输出。

7）使用source map,通常浏览器里面运行的文件时打包编译后的bundle.js文件，如果源文件有错误，那么堆栈智慧简单指向bundle.js，没多大帮助，JavaScript提供了source map功能，将编译后的代码映射回源码。source map不是什么plugin或者loader，仅仅就是javascript的功能。这对于实际开发过程中非常有帮助。

sourceMap不仅支持调试javascript，对于css的调试，只需要在css的相关loader中打开devtool的sourMap开关即可。

8）"watch":"webpack --watch"，npm run watch可以进行script脚本的观察，但是需要刷新浏览器。要实现自动刷新浏览器，则需要使用webpack-dev-server，它提供了一个简单的web服务器，并且能够实现实时重新加载，需要install webpack-dev-server。

9）webpack-dev-middleware，是一个容器，webpack-dev-server在内部使用了它，作为单独的包使用时，例如配合express中间件的使用，把webpack处理后的文件传递给一个服务器。

10）模块热更新（Hot Module Replacement），HRM，运行更新而无需完全刷新，适用于开发环境。HRM是webpack内置的插件，使用的时候在plugins里面，webpack.HotModuleReplacementPlugin()。webpack.namedModulesPlugin是为了更容易查看要修补的依赖，

【bug警示！！！】实际练习中，使用了module.hot条件，进行module.hot.accept方法的执行，发现视图并未热更新，后检查CLI的执行方法，发现使用的是npm run server。

而HRM是webpack-dev-server的hot参数设置为true，所以应该使用npm run start进行热更新运行。

11）tree shaking，用于移除JavaScript上下文中没有引用的代码。在package.json文件中添加sideEffects入口。

tree shaking：应用程序想象成一颗树，绿色代表实际用到的源码和库，是有活力的树叶，灰色代表无用代码，是枯萎的树叶，为了除去死去的树叶，必须摇动这颗树，使得它们落下。

【这也算是优化输出的一种解决方案】

12）webpack4通过配置mode模式为production，可以直接压缩输出。

13）目前webpack4因为零配置思想，需要你手动去安装uglify-webpack-plugin。webpack4.XX新增的mode默认是production，本身继承了UglifyPlugin，所以不需要再引入，开发环境则不需要压缩编译浪费时间，提高开发效率。

在script中的build执行命令中，加上“webpack --mode production”会自动压缩打包。

UglifyJS 是一个js 解释器、最小化器、压缩器、美化器工具集（parser, minifier, compressor or beautifier toolkit）。

注意:

• uglify-js@3 的API 和 CLI已简化，不再向后兼容 uglify-js@2.

• UglifyJS 2.x 文档在这里.

• uglify-js 只支持 ECMAScript 5 (ES5).

• 假如希望压缩 ES2015+ (ES6+)代码，应该使用 uglify-es这个npm 包。

14）开发环境VS生产环境

因为构建目标的差异，开发环境，关注点在：实时重载的热更新模块，source-map和localhost server本地服务器的构建，生产环境关注点：更小的bundle，更轻量级的source-map【一般生产的sourceMap也不会放在服务器】，更优化的资源，更少的加载时间。

所以生产环境配置和开发环境配置一般都是分开写。但是保留了通用配置，使用webpack-merge工具进行合并配置。

webpack.base.js或者webpack.common.js（通用配置），一般设置entry和output，一些公用插件的引入等，webpack.dev.js会添加devtool还有devServer等，而webpack.prod.js则会引入tree shaking删除不必要的模块，以及当mode是production时会自动引用UglifyJS进行压缩打包。

需要在package.json中进行设置start的CLI为"webpack-dev-server --open --config webpack.dev.js"；而build中“webpack --config webpack.prod.js --mode production”。

15）官网鼓励在生产使用source map，但是会加大资源包，真正放在服务器的包还是要剥离该source map文件的。开发中的devtool：'inline-source-map'。可以在开发者模式查看源码。

16）process.env.NODE_ENV环境变量，有两个值，'production'和'development'，是Node.js暴露给执行脚本的系统环境变量，任何在/src下面的本地代码都可以关联该环境变量。

if (process.env.NODE_ENV !== 'production') {
    console.log('development ENV');
  }else{
    console.log('production ENV')
  }

此代码在index.js文件中是执行成功的！！！

17）CSS分离，webpack的理念是将所有的东西都打包在js文件中，包括CSS，图片等，目的很明确就是为了减少http请求，但是劣势明显，随着项目越来越大，js文件也会愈来愈大，所以需要针对css进行分离，进行单独打包。可以使用ExtractTextPlugin将css分离成单独的文件。【css分离也算是webpack的高阶了】

【高级教程提示】Manifest对模块映射到输出bundle的过程保持追踪，manifest的概念以及WebpackManifestPlugin，缓存，代码分离等，是webpack的高阶教程了。

【完】

Today I get through with nothing done is just the tomorrow the men who dead yesterday eager for.

我荒废的今日，正是昨日殒身之人祈求的明日。          ——哈佛校训