初始化
npm init -y
安装依赖
npm i webpack webpack-cli html-webpack-plugin -D
package.json
{ "name": "webpack-test", "version": "1.0.0", "description": "", "main": "index.js", "scripts": { "test": "echo \"Error: no test specified\" && exit 1", "dev": "webpack-dev-server --open" }, "keywords": [], "author": "", "license": "ISC", "devDependencies": { "html-webpack-plugin": "^3.2.0", "webpack": "^4.41.2", "webpack-cli": "^3.3.9", "webpack-dev-server": "^3.9.0" } }
webpack.config.js
const path = require('path') //导入htm-webpack-plugin插件 const htmlWebpackPlugin = require('html-webpack-plugin'); //这个配置文件初始就是一个js文件,通过node中的模块操作 module.exports = { //入口,表示要使用webpack打包哪个文件 entry: path.join(__dirname, './src/main.js'), output: {//输出文件相关的配置 path: path.join(__dirname, './dist'),//指定打包的文件输出到哪个目录 filename: 'bundle.js'//指定输出的文件名称 }, devServer: {//配置dev-server命令参数的配置项 port: 3000,//设置启动的端口号 contentBase: 'src',//设置默认目录 hot: true//启动热更新 }, plugins: [//插件数组 new htmlWebpackPlugin({ //创建一个在内存中生成html页面插件的配置对象 template:path.join(__dirname,'./src/index.html'), //指定模版页面生成内存中的hmtl filename:'index.html' //指定生成的页面名称 }) ] }