1、安装项目需要文件
yarn add webpack webpack-cli webpack-dev-middleware express html-webpack-plugin
2、项目配置如下
const HtmlWebpackPlugin=require(‘html-webpack-plugin‘) const path = require(‘path‘) module.exports = { entry:{ main:‘./src/main.js‘ //根据目录,在src下新建main.js }, plugins:[ new HtmlWebpackPlugin({ template:‘./src/public/index.html‘ //在src/public目录下新建html文件,body内容为<div id="root"></div> }) ], output: { path: path.resolve(__dirname, ‘dist‘), filename: ‘[name].js‘ } }
3、main.js内容如下
let dom=document.querySelector(‘#root‘) let text=document.createElement(‘div‘) console.log(dom) text.innerText=‘我是新创建的html2‘ dom.appendChild(text)
4、在项目根目录下建立server.js,内容如下
const express=require(‘express‘) const webpackDevMiddleware=require(‘webpack-dev-middleware‘) const config=require(‘./webpack.config‘) const webpack=require(‘webpack‘) const complier=webpack(config) //webpack根据配置生成的编译文件 const app=express() app.use(webpackDevMiddleware(complier)) app.listen(8080,()=>{ console.log(‘8080端口已启动,地址为:http://localhost:8080‘) })
5、package.json中配置命令
"scripts": { "build": "webpack", "serve": "node server" },
6、运行yarn serve 就可以打开localhost:8080,查看编译效果了!