webpack学习

1.webpack

本质上，webpack是一个用于现代JavaScript应用程序的静态模块打包工具

静态模块：指的是编写代码过程中的，html，css，js，图片等固定内容的文件

打包：把静态模块内容，压缩，整合，转译等（前端工程化） 

webpack使用步骤：

//初始化项目环境Node.js和webpack
//下载webpack webpack-cli到当前项目中（版本独立）
npm i webpack webpack - cli--save - dev
//-S是--save的简写
//-D是--save-dev的简写
//在package.json中scripts配置局部自定义命令
"scripts": { "build": "webpack" }
//运行打包命令，自动产生dist分发文件夹（压缩和优化后，用于最终运行的代码）
npm run build

 2.修改Webpack打包入口和出口

//在项目根目录，新建webpack.config.js配置文件
const path = require('path');
module.exports = {
    //入口
    entry:路径,
    //出口
    output:{
        path:路径,
        filename:'输出文件名字',
        clean:true//生成打包内容之前，清空输出目录
    }
}

3.webpack自动生成html文件

参考链接：https://www.webpackjs.com/plugins/html-webpack-plugin/

 使用步骤：

//安装
npm install --save-dev html-webpack-plugin
//在webpack.config.js中配置
const HtmlWebpackPlugin = require('html-webpack-plugin');
//new构造函数，创建插件的实例对象
const htmlPlugin = new HtmlWebpackPlugin({
    //指定要复制哪个页面
    template:'路径',
    //指定赋值出来的文件名和存放路径
    filename:'路径'
})


module.exports = {
  
//用法
  plugins: [htmlPlugin],
};

4.webpack打包CSS代码

加载器css-loader参考链接：https://www.webpackjs.com/loaders/css-loader/  解析css代码

加载器style-loader参考链接：https://www.webpackjs.com/loaders/css-loader/把解析后的css代码插入到DOM

5.优化-提取css代码

插件mini-css-extract-plugin：参考链接：https://www.webpackjs.com/plugins/mini-css-extract-plugin/ 

注意：不能和style-loader一起使用

css代码提取后没有压缩：可以使用css-minimizer-webpack-plugin插件参考链接：https://www.webpackjs.com/plugins/css-minimizer-webpack-plugin/ 

 6.打包less代码

加载器less-loader：把less代码编译为css代码

参考链接：https://www.webpackjs.com/loaders/ 

7.搭建开发环境

配置webpack-dev-server快速开发应用程序

参考链接：https://www.webpackjs.com/guides/

作用：启动web服务，自动检测代码变化，热更新到网页 

注意：dist目录和打包内容是在内存里（更新快）

8.webpack打包模式

分类：

模式名称	模式名字	特点	场景
开发模式	development	调试代码，实时加载，模块热替换等	本地开发
生产模式	production	压缩代码，资源优化，更轻量等	打包上线

设置：

        在webpack.config.js配置文件设置mode选项

        在package.json命令行设置mode参数

注意：命令行设置的优先级高于配置文件中的，推荐用命令行设置

9.优化-CDN使用

CDN定义:内容分发网络，指的是一组分布在各个地区的服务器

作用:把静态资源文件/第三方库放在CDN网络中各个服务器中，供用户就近请求获取

好处:减轻自己服务器请求压力，就近请求物理延迟低，配套缓存策略