1.什么是Webpack
前端模块化打包工具
从本质上来讲,Webpack是一个现代的JavaScript应用的静态打包工具
2.webpack node npm 的关系
webpack依赖于node环境
node环境为了可以正常执行很多代码,必须其中包含各种依赖的包——npm工具(管理各种包)
3.webpack 安装
- 安装node
- npm install webpack@3.6.0 -g
4.webpack的基本使用
1)webpack的起步
cd 文件夹名 webpack 入口文件(自动找对应依赖) 打包成的文件
在html页面引用打包成的文件
2)webpack配置
新建一个叫webpack.config.js的文件
npm init 生成一个package.json
const path = require('path') //用之前必须要用path包
module.exports={
entry:'',//入口
output:{//出口
path:path.resolve(__dirname,'dist'), //动态获取绝对路径 两个下划线
filename:'bundle.js' //文件名 bundle:打包
},
}
3)依赖 css文件
www.webpack.js.com
用之前装loader css-loader只将css文件加载 还得安装style-loader
入口函数写: require(‘.css/normal.css’)
4)图片依赖
安装个loader ——url-loader
5.webpack配置Vue