webpack打包（一）--一次简单的打包体验

目录结构

dist是打包后js文件的存放目录

src是我们写的代码

代码

a.js

export default function () {
    console.log("a");
}

b.js和c.js类似，使用node的语法导出一个默认接口

app.js

import a from "./a";
import b from "./b";
import c from "./c";
a();
b();
c();

app.js是打包的入口

webpack.config打包配置

const path = require("path");
module.exports = {
    entry: "./src/app.js",
    output: {
        path: path.resolve(__dirname, "dist"),
        filename: "main.js"
    }
};

用module.exprots导出一个对象，entry是打包的入口文件，可以接受一个相对路径

output是打包输出的配置，path输出目录，这里只能是绝对路径，可以通过引用node内置的模块path解析当前的绝对路径，__dirname获取到当前webpack.config所在位置的绝对路径

filename打包后文件的名称

初始化一个打包项目

在文件的根目录运行npm init命令，创建一个package.json文件

在scripts字段里面配置一下打包命令

"scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "dev":"webpack"
  }

进行打包

运行npm run dev打包，在dist目录里面生成一个main.js文件，打包完成

执行脚本

在index.html里面直接引用main.js即可