webpack|webpack知识点 javascript|前端

1.webpack概念

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

2.打包工具

1.sea.js
2.require.js
3.gulp
4.grunt
5.webpackwebpack依赖 webpack.config.js打包

3.入口entry

入口起点(entry point) 指示 webpack 应该使用哪个模块，来作为构建其内部依赖图(dependency graph) 的开始。进入入口起点后，webpack 会找出有哪些模块和库是入口起点（直接和间接）依赖的。
默认值是 ./src/index.js，但你可以通过在 webpack configuration 中配置 entry 属性，来指定一个（或多个）不同的入口起点

4.输出

path:__dirname+"/dist"
（__dirname当前目录）

filenane
文件名称

output:{ //__dirname 指当前目录两个下划线 //路径 path:__dirname+'/dist', //打包好的js文件名称 filename:'main.js' },

5.模式 moude

模式分为两种：
一.development开发模式
二.production产品模式

6.加载器 loader

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

7.插件 plugins

在webpack运行过程做打包，压缩，清理，
使用：
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

8.本地服务器 devServe