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.

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

posted @ 2019-02-27 11:22  tangjiao_Miya  阅读(319)  评论(1编辑  收藏  举报