什么是webpack

wbpack是一个静态模块打包器,它将项目当做一个整体,通过一个指定的入口文件(main.js),找到项目所有依赖的相关文件,并通过loader处理他们,最终打包成一个多或多个浏览器可识别的js文件。

webpack.config.js的配置

let webpack=require('webpack');

module.exports={
    entry{
      app: './js/app.js',
      vendor: ['./js/moduleA', './js/moduleB']
    }, //入口文件(单入口)
    output:{
         //_dirname获取当前模块所在目录的完整绝对路径
        path: path.resolve(__dirname, './dist/js'), //编译到当前目录,这个目录要求要绝对路径
        filename: '[name].[chunkhash].js', //编译后的文件名字
    },
    module:{
        rules:[  //通过正则表达式匹配不同后缀的文件,使用不同的加载器
            {
                test:'/.css$/',
                loader:'style-loader!css-loader'
            }
        ]
    },
    plugins:[
        new webpack.optimize.CommonsChunkPlugin({
            names: ['vendor', 'manifest']     //将公共模块提取,生成名为‘verdors’的chunk
        }),
    ],
    resolve: {
        extensions: ['.js', '.jsx', '.less', '.scss', '.css'], //后缀名自动补全
    },
    devServe:{   //配置服务,通过'webpack-dev-server'插件
        port:'8088',//配置端口号
        hot:true, //启用热更新
        inline:true //此模块支持热模块替换(即指替换更新的部分,而不是整个页面重载),
        proxy:{   //设置代理
            '/api':{
                target:'实际请求地址', //目标代理
                changeOrgin:true, //改变源到url
                pathRewrite:{'^/api':''} //重写路径
                secure:true //允许https
            }
        }        
    }
};

 

常见的loader及其作用

1、css-loader:加载css,支持模块化、压缩、文件导入等特性;

2、style-loader:往html中插入<style>标签

3、babel-loader:把es6转换为s5

4、file-loader:把文件输出到一个文件夹中,通过相对url路径去引用输出的文件

5、url-loader:把小图片转换为base64文件

6、slint-loader:检查js代码

 

常见的plugin及其作用

Define-plugin:定义环境变量

HtmlWebpackPlugin:自动生成html

UglifyJsPlugin:压缩js

SplitChunksPlugin:代码切割,提取公共代码

BundleAnalyzerPlugin:模块分析

 

编写loader或plugin的思路

loader:帮助webpack加载和解析非js文件。

plugin:扩展webpack的功能。

编写loader要遵循“单一”原则,每个loader转义一种类型的文件,通过获取源文件,将其进行转义处理,最终返回处理之后的内容。

编写plugin是在运行webpack的生命周期中,监听相关事件,通过webpack提供的api改变输出结果。

  

bundle 、chunk 、module

bundle是打包之后的代码块

chunk是在进行模块分析的时候,代码分割出来的代码块

module是在开发过程中的单个模块

 

运行时runtime

当打包之后,应用程序的目录结构不复存在,webpack通过runtime与manifest管理各个模块之间的联系与交互。

manifest保留着所有模块的详细要点(比如依赖于哪个模块)。

runtime根据manifest,查询模块标识符,实现模块的加载和逻辑解析。

 

webpack-dev-server和http服务器如nginx有什么不同

webpack-dev-server使用内存来存储开发时的打包文件,可以使用模块热更新,它比传统的http服务器更加简单高效。

 

什么是长缓存?

浏览器具有缓存的功能,当我们更新代码时,一般会通过更新文件名使浏览器去下载新的代码,而不去使用缓存的旧代码。

为了使我们的开发和调试更加高效,webpack提出一种长缓存的方案,就是通过NameModulesPlugin插件去分离项目中经常更新的代码和不经常更新的代码(如引入的第三方库、插件等),使那些不经常更新的代码打包时文件名不变,从而提高打包效率。

 

如何利用webpack来优化前端性能

1、压缩代码,删除多余的注释、简化代码等;

2、利用CDN加速;

3、删除死代码(tree shaking)

4、优化图片(压缩、雪碧图、base64)

5、路由懒加载、按需加载,提取公共代码;

6、去除sourcemap。代码分割,实现长缓存。

posted @ 2020-04-10 16:13  2350305682  阅读(244)  评论(0编辑  收藏  举报