webpack学习

webpack基本概念

1. 本质是一个第三方模块包，用于分析，并打包代码
2. 支持所有类型文件的打包
3. 支持less/sass ⇒ css
4. 支持ES6/7/8 ⇒ ES5
5. 压缩代码，提高加载速度

webpack使用步骤

环境准备

1. 初始化包环境 yarn init
2. 安装依赖包 yarn add webpack webpack-cli -D
3. 配置scripts（自定义命令）

"scripts": {
   
   "build": "webpack"
}

webpack基础使用

webpack的配置

配置文档

1. 新建webpack.config.js
2. 填入配置
3. 修改入口文件名
4. 打包观察效果

示例

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 插件