Webpack 入门教程

Webpack 是一个前端资源加载/打包工具。他将根据模块的依赖关系进行静态分析，然后将这些模块按照指定的规则生成对应的静态资源。

从图中我们可以看出，Webpack可以将多种静态资源js、css、less转换成一个静态文件，减少了页面的请求。

webpack打包工具

gulp   grunt   sea.js   require.js  webpack依赖webpack.config.js打包

入口  entry  输出output(path:__dirname+"/dist"(__dirname当前目录),filename文件名称)

mode模式:production产品模式  development开发模式

webpack加载器(loader)

css-loader 处理.css文件
style-loader 把css加载到style标签
module:{
   rules:[
      {"test":/\.css/,loader:["style-loader","css-loader"]}
  ]
}
处理非js文件

webpack插件(plugins)

在webpack运行过程做打包,压缩,清理
01 安装
npm i html-webpack-plugin
02 导入
const HtmlWebpackPlugin = require("html-webpack-plugin")
03 使用
plugins:[
   new HtmlWebpackPlugin({template:"./public/index.html"})
]
使用
    01 安装
npm i html-webpack-plugin
02 导入
const HtmlWebpackPlugin = require("html-webpack-plugin")
03 使用
plugins:[
   new HtmlWebpackPlugin({template:"./public/index.html"})
]
html-webpack-plugin
    把模板html 插件打包好的js 拷贝到 dist目录
把模板html 插件打包好的js 拷贝到 dist目录
清理 dist目录
clean-webpack-plugin
    清理 dist目录
    const { CleanWebpackPlugin} = require("clean-webpack-plugin")
const { CleanWebpackPlugin} = require("clean-webpack-plugin")
把css文件抽出为 单独的css文件
{"test":/\.css/,use:[  MiniCssExtractPlugin.loader, "css-loader"]},
mini-css-extract-plugin
    把css文件抽出为 单独的css文件
    {"test":/\.css/,use:[  MiniCssExtractPlugin.loader, "css-loader"]},
    new  MiniCssExtractPlugin({
            filename: "style-[hash:7].css"
        })
new  MiniCssExtractPlugin({
            filename: "style-[hash:7].css"
        })
css优化插件
optimization: { //优化选项
        minimizer: [          
            new CssMinimizerWebpackPlugin() ]      // 实现优化    
    }
css-minimizer-webpack-plugin
    css优化插件
    optimization: { //优化选项
        minimizer: [          
            new CssMinimizerWebpackPlugin() ]      // 实现优化    
    }

webpack路径别名   

 resolve:{
        alias:{
            // 指定@代表当前目录下的src目录
            "@":path.resolve(__dirname,"./src")
        }
    }

devServer 本地服务器

devSever:{
   host:"域名",
   port:"8080",
  hot:"热更新",
  open:"是否自动打开浏览器",
  proxy:{},//代理
}
package.json
"script":{
    "serve":"webpack serve"
}
npm  run serve

浏览器缓存的机制提高了2次加载的速度

浏览器get 请求会缓存
如果浏览器第二次请求的地址在缓存中用就使用缓
web hash缓存
如果文件没有发生修改,使用一样名称
如果文件发送修改了,更改生成的文件名
没有发生更改的文件:缓存
修改的文件:更新