1.在安装了node的前提下,终端运行
//全局安装cnpm,安装其它包速度更快
npm i cnpm -g
2.项目根目录下新建src和dist文件夹,在src下新建index.html和index.js
全局安装webpack和webpack-cli
cnpm i webpack webpack-cli -g
3.配置webpack
在根目录下新建webpack.config.js,运行webpack打包,在dist文件夹下会生成打包好的js文件
module.exports={
mode:'development'
}
4.安装html-webpack-plugin打包html文件
cnpm i html-webpack-plugin -D
配置html-webpack-plugin
const path=require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin')
let htmlplugin=new HtmlWebpackPlugin({
template:path.join(__dirname,'./src/index.html'), //要打包的html源文件
filename:'index.html' //生成在内存中首页的名称
})
module.exports={
//webpack开发模式配置,必需的配置
mode:'development',
//配置html-webpack-plugin第二部分
plugins:[
htmlplugin
],
//配置html-webpack-plugin第二部分
}
再执行webpack,src文件夹下的index.html会被打包到dist下
5.安装webpack-dev-server,实时更新页面
cnpm i webpack-dev-server -D
配置webpack-dev-server
"dev": "webpack-dev-server --open chrome --post 1000 --host 127.0.0.8"
再执行npm run dev就可以实时获取页面信息了