1. 前端的工程化工具
- grunt
- 资源打包
- 单元测试
- gulp
- 流式操作工具
- 资源打包
- webpack 【 主流 】
- 资源打包工具, 比如 js文件打包压缩 , img 打包压缩 。。。
- 可以自动解决模块化依赖问题
- es6模块化
2. webpack.config.js配置
-
全局
cnpm i webpack webpack-cli -g
yarn add webpack webpack-cli global
cli 命令行工具 打包会依赖cli -
本地(项目目录)
npm i webpack webpack-cli --save-dev 开发依赖
项目: 优先找本地 ----》 全局
3.概念:
webpack是一种静态编译工具(预编译)
入口文件、出口、转换器、插件
webpack–打包
development: 开发环境
production; 生产环境
webpack --mode development 会自动找src/index.js 到 dist/main.js
要求设置开发模式|生产模式
webpack 入口地址 --mode development 指定出口
webpack aa/index.js --mode development bb/index.js 自定义
#####; 1. 单页面
- 入口文件
entry: 相对路径
- 出口文件
- 配置hash
output: {
path: path.resolve(__dirname,'dist'),
filename: 'js/app_[hash:6].js'
}
- 转换器: 将某一类型的文件转成另一个类型文件的一个工具,我们常用loader来表示
- 举例: css文件
- 所有的loader用一个module的配置项表示
module: {
rules: [
{} //每一个对象表示一个类型文件的转换器
]
}
书写一个单页面转换,例:
const path = require('path')
module.exports = {
//入口文件
//入口文件相对路径(网络路径)
entry: './src/index.js', //单文件
//出口文件
//output:{path,filename}path是出口的磁盘路径,filename是出口目录中的文件名称
output: {
path: path.resolve(__dirname, 'dist'),
// filename: `js/app_[hash:6].js`也可以写上":"加数字,添加哈希值。
filename: 'js/app.js'//单页面
}
}
2.多页面
多页面写法,例:
const path = require('path')
module.exports = {
//入口文件
//入口文件相对路径(网络路径)
entry: { //多页面
//key:value key是入口文件的名称,值是入口文件的路径
app: './src/app.js',
index: './src/index.js',
},
//出口文件
//output:{path,filename}path是出口的磁盘路径,filename是出口目录中的文件名称
output: {
path: path.resolve(__dirname, 'dist'),
// filename: `js/app_[hash:6].js`也可以写上":"加数字,添加哈希值。
filename: 'js/[name]_[hash:6].js' //多页面
}
}
webpack --前端服务器–webpack-dev-server
http-server / server / webpack-dev-server 第三方服务包
需要自动刷新: webServer 搭建前端开发服务器
cnpm install webpack-dev-server -g | -D
参数:
命令行
webpack-dev-server --port 8088 --open --mode development
写到webpack.config.js配置文件:
devServer: {//和module同级
port: 8088,
open:true
}
终端运行方式2: webpack-dev-server
把运行命令放到package.json文件: devServer可以不要了
“scripts”:{
“dev”: “webpack-dev-server --port 8088 --open”
}
终端: npm run dev