1.文件结构
2.安装 webpack、webpack-cli
$ npm init $ npm i webpack@4.41.6 webpack-cli@3.3.11 -g //(全局) $ npm i webpack@4.41.6 webpack-cli@3.3.11 -D //(开发环境)
2.1 安装 html-webpack-plugin
$ npm i html-webpack-plugin@3.2.0 -D
3.新建 src 文件夹
src 文件夹下新建 入口文件 index.js 文件
src 文件夹下新建 index.html 文件
3.1 新建 webpack.config.js 文件
index.js
function add(x,y) { return x+y } console.log(add(2,3));
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
</body>
</html>
webpack.config.js
/* loader: 1. 下载 2. 使用（配置loader） plugins: 1. 下载 2. 引入 3. 使用 插件需要引入后再使用 */ const {resolve} = require('path') // HtmlWebpackPlugins 是一个构造函数 const HtmlWebpackPlugins = require('html-webpack-plugin') module.exports = { entry: './src/index.js', output: { filename: "built.js", path: resolve(__dirname, 'build') }, module: { rules: [] }, plugins: [ //plugins 的配置 // html-webpack-plugin //功能: 默认创建一个空的HTML,自动引入打包输出的所有资源(JS/CSS) new HtmlWebpackPlugins({ // 复制 './src/index.html' 文件，并自动引入打包输出的所有资源（JS/CSS） template: './src/index.html' }) ], mode: 'development' }
这里主要是 使用 HtmlWebpackPlugins 处理 html 文件
4.打包
$ webpack
build 文件夹下回生成两个文件
预览
end~