——————webpack基础教学————

目录

一、webpack概念

二、创建webpack.config.js

三、loader 加载器

四、插件

五、本地服务器

六、hash

---

一、webpack概念

1. 前端静态模块化打包器
2. 把所有经过webpack处理，生成html,css,图片，js

二、创建webpack.config.js

1.  webpack配置文件
2. 写入口,出口,模式,loader 加载器,plugin

   entry:'./src/index.js',//入口 (webpack 从哪个文件开始运行)
    output:{
        path:__dirname+'/dist', //目录
        filename:'main.js',//打包好的js文件名称
    },//出口
 mode:"production",//模式 产品模式,production,开发模式development

三、loader 加载器

处理非js文件

module:{
   rules:[
      {"test":/\.css/,loader:["style-loader","css-loader"]}
  ]
}

style-loader 把css加载到style标签
css-loader 处理.css文件

四、插件

在webpack运行过程做打包，压缩，清理

运行cmd

1.安装
npm i html-ewbpack-plugin
2.导入
const HtmlWebpackPlugin = require('html-webpack-plug')
3.使用
plugins:[
    new HtmlWebpackPlugin({template:'./public/index.html'})
]

// 导入插件
const HtmlWebpackPlugin = require("html-webpack-plugin");

    plugins:[
        // 实例化插件(把public的index.html 插入main.js(打包好的文件) 拷贝到 dist目录)
        new HtmlWebpackPlugin({"template":'./public/index.html'})
    ],

五、本地服务器

webpack.config.js写入

devSever:{
   host:"域名",
   port:"8080",
  hot:"热更新",
  open:"是否自动打开浏览器",
  proxy:{},//代理
}

package.json文件中写入并在cmd中运行 npm  run serve

package.json
"script":{
    "serve":"webpack serve"
}

六、hash

1. hash:文件内容发生变化,hash变化
2. contentHash:内容发生变化hash变化
3. chunckHash:入口有很多个,哪个入口发送变化,hash变化

https://www.jianshu.com/p/2e4e930afc3d 连接详细解释