Webpack入门学习

目录

文章目录

Webpack是什么

使用

新建工程

mkdir webpack-demo
cd webpack-demo

// 创建package.json
npm init -y

// 添加webpack
npm install --save-dev webpack

编写Demo

新建/app/sum.js、/app/index.js、/index.html以及build文件目录。
文件目录如下

项目结构

/app中保存的是我们的js文件

/build是将来我们使用webpack打包后js文件的入口的路径。

// sum.js
module.exports = function add(a, b) {
  return a + b;
}

// index.js
var sum = require("./sum.js");

console.log(sum(1, 1));

最外层的index.html

配置webpack

在根目录下新建文件webpack.config.js

const path = require("path");

module.exports = {
  entry : './app/index.js', // 入口文件
  output : {
    path : path.resolve(__dirname, "build"), // 必须使用绝对地址，输出文件夹
    filename : "bundle.js" // 打包之后输出的名字
  }
}

使用webpack打包

直接执行命令

webpack

最后的输出结果应该是这样的，在我们指定的/build文件中生成了一个bundle.js文件

webpack打包成功

浏览结果

使用浏览器打开index.html文件就可以查看结果啦

运行结果

运行分析