-
创建项目文件夹
yarn init -
创建基本目录结构
public/index.html
src/main.js
webpack.config,js -
安装必要依赖
webpack
webpack-cli
webpack-dev-server
clean-webpack-plugin
html-webpack-plugin -
添加配置
const path = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin')
const { CleanWebpackPlugin } = require('clean-webpack-plugin')
module.exports = {
entry: './src/main.js',
plugins: [
new CleanWebpackPlugin(),
new HtmlWebpackPlugin({
title: "Webpack App",
template: "public/index.html"
})
],
devServer: {
contentBase: './dist',
},
output: {
filename: '[name].js',
path: path.resolve(__dirname, 'dist'),
}
}
- package.json 添加启动项命令
"scripts": {
"start": "webpack-dev-server --open",
"build": "webpack"
}
- 运行 yarn start