webpack基本概念
- 本质是一个第三方模块包,用于分析,并打包代码
- 支持所有类型文件的打包
- 支持less/sass ⇒ css
- 支持ES6/7/8 ⇒ ES5
- 压缩代码,提高加载速度
webpack使用步骤
环境准备
- 初始化包环境 yarn init
- 安装依赖包 yarn add webpack webpack-cli -D
- 配置scripts(自定义命令)
"scripts": {
"build": "webpack"
}
webpack基础使用
webpack的配置
- 新建webpack.config.js
- 填入配置
- 修改入口文件名
- 打包观察效果
示例
webpack.config.js
const path = require('path');
module.exports = {
entry: './src/main.js',
output: {
path: path.resolve(__dirname, 'dist'),
filename: 'bundle.js',
},
};
yarn bulid执行流程图
1、webpack打包时,自动生成html文件
使用 html-webpack-plugin 插件