webpack的概述
- webpack是一个现代的javascript应用程序的静态模块的打包器
那么webpack做了什么呢
1.语法的转换
- less/sass转换成css
- Es6转换为Es5/Es3
- typescript转换为js
2.html/css/js代码的压缩与合并(打包)
3.webpack可以在开发期间提供一个开发环境
- 自动开启浏览器
- 自动监视文件变化
- 自动刷新浏览器
4.项目一般都需要经过webpack打包之后才上线
webpack模块说明
1.webpack会把所有的资源当成模块
- css
- js
- 图片
- 字体图标
2.webpack给前端开发提供了模块化开发环境
- 对于js文件,webpack中支持AMD.CMD.commonJS.Es6模块化开发语法
- 有了webpack,我们可以在前端代码中任意的使用模块发语法
- 可以在浏览器中使用node.js的模块化语法
const $ = require('jquery')
下面我们来使用webpack
1.创建一个文件夹 Webpack-demo
2.初始化项目生成 Package.json
yarn init -y
3.安装webpack的依赖包
yarn add webpack webpack-cli -D
4.新建文件src和dist文件夹,src用于提供源码,dist用于存放打包后的文件
5.在package.json文件配置了打包的脚本
"scripts": {
"build": "webpack --config webpack.config.js"
}
6.在项目的根目录,创建一个文件webpack.config.js
7.执行打包命令
yarn build
以上就是一个不需要配置的打包过程
下面是webpack的配置了
配置webpack的打包入口
- 在webpack.config.js文件中
module.exports = {
entry: './src/app.js' //默认为index.js 我们改为app.js
}
配置webpack的打包出口
- 在webpack.config.js文件中
// 配置webpack打包出口
output: {
// path: 打包出口的目录,默认 dist, 必须指定绝对路径
path: path.join(__dirname, 'lib'),
// filename: 打包出口的文件名字 默认 main.js
filename: 'bundle.js'
}
如果要配置path,记得是绝对路径
配置webpack的打包模式
// 打包模式 development|production
// development: 打包不会对进行压缩 打包快
// production: 打包会对代码进行压缩 上线
mode: 'development'
配置html-webpack-plugin插件
html-webpack-plugin插件能够帮助我们自动在dist中生成一个html文件,并且会自动帮我们引入打包后的文件
1.安装html-webpack-plugin插件
yarn add html-webpack-plugin -D