Skip to content

Latest commit

 

History

History

01-quickly-start

Folders and files

NameName
Last commit message
Last commit date

parent directory

..
dist
dist
 
 
src
src
 
 
.gitignore
.gitignore
 
 
README.md
README.md
 
 
index.html
index.html
 
 
package.json
package.json
 
 
yarn.lock
yarn.lock
 
 

README.md

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("默认约定打包入口与输出");