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