webpack--黑洞级入门

webpack概念

前端模块化打包机：打包+依赖关系
把错综复杂依赖关系和文件生成浏览器可识别的：html+css+js+图片

webpack打包工具

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

安装与初始化

md mydiv

cd mydiv

npm init -y

npm i webpack webpack-cli -D

核心

webpack.config.js

vue.config.js

入口：entry

输出：output    -- filename：“”  --path：__dirname+‘./dist’

模式：mode   --development 开发模式 --production 产品模式

loader：处理非js文件 

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

                图片/文件：--file-loader 处理文件    --url-loader 处理文件并把小图片转为base64格式

plugins：压缩，打包，清理等功能

                html-webpack-plugin  html模板

                webpack-dev-server 本地服务器

resolve：alias别名  {"@":path.resolve(__dirname,'./src')}