webpack由浅入深

webpack的基本语法和工作流程

初体验

step1: 创建目录

step2: 创建webpack.config.js

step3: 在src中创建测试文件夹和文件

图片描述

step4: 编写测试代码

• 在a.js,b.js,c.js文件中分别写入

export default function() {
    console.log("this is a/b/c.js")
}

step5: 在app.js中导入模块

import a from "./js/a.js";
import b from "./js/b.js";
import c from "./js/c.js";

step6: 在webpath中写入配置

const path = require("path");

module.export = {
    //入口
    entry: "./src/app.js"
    //输出
    output: {
        path: path.resolve(__dirname, dist); //一定要写绝对路径
        filename: "main.js"
    }
}

step7: 初始化package.json

npm init -y

step8: 安装webpack

npm install webpack --save-dev

step9: 开始打包

webpack

webpack插件

1. html-webpack-plugin插件

在webpack.config.js文件中新增如下代码

安装html-webpack-plugin

npm install html-webpack-plugin --save-dev

开始打包

webpack