什么是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。代码分割，实现长缓存。