Skip to content

Latest commit

 

History

History

01-quickly-start

Folders and files

NameName
Last commit message
Last commit date

parent directory

..
 
 
 
 
 
 
 
 
 
 
 
 
 
 

webpack 快速上手

下面是一个基于 webpack 的项目的快速上手

初始化项目

yarn init --yes

安装依赖

yarn add webpack webpack-cli --dev

编写代码

在项目根目录新建 index.html,在 src 目录下新建 index.js
index.html 中使用 script 标签引入 index.js

// src/index.js

function log () {
  console.log('webpack 快速上手')
  console.log('默认约定打包入口与输出')
}

log()
<!-- index.html -->

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>01-quickly-start</title>
</head>
<body>
  <script src="./src/index.js"></script>
</body>
</html>

打包编译

webpack 4 之后的版本支持零配置启动打包,默认按照约定入口跟输出是 src/index.js -> dist/main.js

运行打包命令 yarn webpack,即可看到输出目录 dist 中的打包结果。

// dist/main.js

console.log("webpack 快速上手"),console.log("默认约定打包入口与输出");