webpack最详细学习

1、作用

webpack 是一个用于现代 JavaScript 应用程序的 静态模块打包工具，将各种类型资源打包编译为最基础的html、js、css、img等

2、安装

 创建npm项目

npm init -y

安装webpack以及脚手架

npm install webpack webpack-cli --save-dev   

3、helloword

原始目录

 index.html    <script src="./src/index.js"></script>
   src/index.js

webpack目录

1.src/index.js  引入外部模块

console.log("项目入口");

import { createButton } from "./utils/createbutton";
createButton("首页按钮",()=>{
    console.log("首页按钮点击了");
})

            utils/createButton.js

export function createButton(text, clickCallBack) {
    let button = document.createElement("button");
    button.innerText = text;
    button.onclick = clickCallBack;
    document.body.appendChild(button);
}

    2. dist/index.html
             <script src="./main.js"></script>
   3. webpack操作
            npx webpack
            npx可以用于本地项目安装的指令工具
            会在package.json同级目录编译生成dist文件夹 存放编译好的main.js

3、配置文件

     package.json同级目录新建webpack.config.js

基本配置
   

	entry: "./src/index.js", // 指明打包开始文件
	output: {
			filename: "main.js",
			path: path.resolve(__dirname, "dist"), //指明打包成果文件目录
			clean: true, //清理dist下无用的文件夹
		}, 

解析路径 resolve

     配置

resolve:{
        alias:{
            "@":path.resolve(__dirname, "src")
        }
    }

     导入

import { createButton } from "@/utils/createbutton&#