webpack

什么是Webpack

WebPack可以看做是模块打包机：它做的事情是，分析你的项目结构，找到JavaScript模块以及其它的一些浏览器不能直接运行的拓展语言（Scss，TypeScript等），并将其打包为合适的格式以供浏览器使用。

为什要使用WebPack

现今的很多网页其实可以看做是功能丰富的应用，它们拥有着复杂的JavaScript代码和一大堆依赖包。为了简化开发的复杂度，前端社区涌现出了很多好的实践方法

• 模块化，让我们可以把复杂的程序细化为小的文件;
• 类似于TypeScript这种在JavaScript基础上拓展的开发语言：使我们能 够实现目前版本的JavaScript不能直接使用的特性，并且之后还能能装换为JavaScript文件使浏览器可以识别；
• Scss，less等CSS预处理器…
  这些改进确实大大的提高了我们的开发效率，但是利用它们开发的文件往往需要进行额外的处理才能让浏览器识别,而手动处理又是非常反锁的，这就为WebPack类的工具的出现提供了需求。

webpack打包原理

把所有依赖打包成一个 bundle.js 文件，通过代码分割成单元片段并按需加载。

webpack的优势

（1） webpack 是以 commonJS 的形式来书写脚本滴，但对 AMD/CMD 的支持也很全面，方便旧项目进行代码迁移。
（2）能被模块化的不仅仅是 JS 了。
（3） 开发便捷，能替代部分 grunt/gulp 的工作，比如打包、压缩混淆、图片转base64等。
（4）扩展性强，插件机制完善

什么是loader，什么是plugin

loader用于加载某些资源文件。因为webpack本身只能打包common.js规范的js文件，对于其他资源如css，img等，是没有办法加载的，这时就需要对应的loader将资源转化，从而进行加载。

plugin用于扩展webpack的功能。不同于loader，plugin的功能更加丰富，比如压缩打包，优化，不只局限于资源的加载。

什么是bundle，什么是chunk，什么是module

bundle： 是由webpack打包出来的文件

chunk： 是指webpack在进行模块依赖分析的时候，代码分割出来的代码块

module： 是开发中的单个模块

webpack 和 gulp 的区别？

webpack：
gulp是一个前端自动化构建工具，强调的是前端开发的工作流程，可以通过配置一系列的task，第一task处理的事情（如代码压缩，合并，编译以及浏览器实时更新等）。然后定义这些执行顺序，来让glup执行这些task，从而构建项目的整个开发流程。自动化构建工具并不能把所有的模块打包到一起，也不能构建不同模块之间的依赖关系。

什么是模热更新？有什么优点？

模块热更新是webpack的一个功能，它可以使得代码修改之后，不用刷新浏览器就可以更新。在应用过程中替换添加删出模块，无需重新加载整个页面，是高级版的自动刷新浏览器。
优点：
只更新变更内容，以节省宝贵的开发时间。调整样式更加快速，几乎相当于在浏览器中更改样式

webpack-dev-server 和 http服务器的区别

webpack-dev-server使用内存来存储webpack开发环境下的打包文件，并且可以使用模块热更新，比传统的http服务对开发更加有效。

什么是长缓存？在webpack中如何做到长缓存优化？

浏览器在用户访问页面的时候，为了加快加载速度，会对用户访问的静态资源进行存储，但是每一次代码升级或者更新，都需要浏览器去下载新的代码，最方便和最简单的更新方式就是引入新的文件名称。

在webpack中，可以在output给出输出的文件制定chunkhash，并且分离经常更新的代码和框架代码，通过NameModulesPlugin或者HashedModulesPlugin使再次打包文件名不变。

什么是Tree-sharking?CSS可以Tree-shaking吗?

Tree-shaking是指在打包中去除那些引入了，但是在代码中没有被用到的那些死代码。在webpack中Tree-shaking是通过uglifySPlugin来Tree-shakingJS。Css需要使用Purify-CSS。

如何可以自动生成webpack配置？

npm i webpack webpack-cli -D

使用

在项目中配置webpack

在项目根录中，创建名为webpack.config.js 的webpack配置文件，并初始化如下的基本配置

在package.json的script节点下，新增serve脚本如下：

mode 节点 的可选值有两个，分别是：

development

• 开发环境
• 不会对打包生成的文件进行代码压缩和性能优化
• 打包 速度快 ，适合在 开发阶段使用 production
• 生产环境
• 会对打包生成的文件进行代码压缩和性能优化
• 打包 速度很慢 ，仅适合在项目 发布阶段 发布阶段 使用

自定义打包的入口和出口

在 webpack.config.js配置文件中，通过entry节点指定打包的入口 。通过output 节点指定打包的出口 。

webpack的插件

html-webpack-plugin

• webpack中的 HTML 插件（类似于一个模板引擎）
• 可以通过此插件自定制 index.html页面的内容
• webpack-dev-server 可以让 webpack 监听项目源代码的变化 ，从而进行自动打包构建 。
  

安装 webpack-dev-server

配置 webpack-dev-server

• 修改 package.json -> scripts 中的 serve 命令如下：

打包处理 css 文件

• 运行 npm i style-loader css-loader -D 命令，安装处理 css 文件的 loader
• 在 webpack.config.js 的 module -> rules 数组中，添加 loader 规则如
  

打包处理样式表中与 url 路径(图片)相关的文件

• 运行 npm i url-loader file-loader -D 命令
• 在 webpack.config.js 的 module -> rules 数组中，添加 loader 规则如下：
  

自动清理 dist 目录下的旧文件

为了在每次打包发布时自动清理掉 dist 目录中的旧文件，可以安装并配置 clean-webpack-plugin 插件：
现在项目终端中运行如下命令

• npm i clean-webpack-plugin -D

• 配置clean-webpack-plugi

//导入htmL-webpack-plugin插件处理htmL目标
//提前安装 npm i htmL-webpack-plugin -D
//npm i clean-webpack-plugin -D
//作用:清零dist目录(执行npm run build需要清理上一次的生成的内容)
const {CleanWebpackPlugin} = require("clean-webpack-plugin")
const HtmlWebpackPlugin = require("html-webpack-plugin")
//自定拷贝到dist目录,插入打包好的js文件

//使用loader
//npm i css-loader style-loader -D
// css-loader处理css文件，style-loader把加载好的css放入style标签
module.exports = {
    entry: './src/index.js', //入口
    output: {  //出口
        filename: "main.js",   //文件名
        path: __dirname + '/dist', //文件夹 dirname当前归录

    },
    mode: "production", // // 模式 development开发模式 production 产品模式
    plugins: [
        //实例化插件，指定tempLate模板的位置
        new HtmlWebpackPlugin({
            template: './public/index.html'
        }),
        //实例化清理
        new CleanWebpackPlugin()
    ],
    module: {
        rules: [
            //当文件名test通过，使用如下插件
            { test: /\.css$/, use: ["style-loader", "css-loader"] },
            // 需要提前安装url-loader file-loader
            {test:/\.(png|jpg|jpeg|webp|ico|gif|bmp)$/,
            use:[{
                loader:"url-loader",  //使用url加载器
                options:{limit:5000,name:'images/[hash].[ext]'},
                //选项，当图片小于5000字节时候，转换base64（小图片减少一次http请求）
                //文件命名images文件夹,hash值（计算出图片的名称)ext后缀名
            }]    
        },
        ]
    },
    //需要提前安装npm i webpack-dev-server -D
    devServer: {
        port: 8080,
        hot: true,//更新
        host: "localhost",//域名
        open: true,//默认自动打开浏览器
        proxy: {} //vue.config.js代理一致
    }
}
// module 模块 exports 导出 entry output 输出  filename 文件名 path 路径  dirname 当前目录  dist 目标
// module 模式 deveLopment 开发模式 production 产品
//dev开发Server服务器prot端口号hot热更新 host域名 open打开 proxy代理

配置 webpack 的打包发布

"scripts": {
    "build": "webpack",
    "serve": "webpack serve",
    "test": "echo \"Error: no test specified\" && exit 1"
  },