1、npm init -y 快速初始化项目 2、在项目根目录创建一个源代码目录src和dist产品目录 3、在src目录下创建index.html 4、 使用cnpm安装webpack，运行 cnpm i webpack -D
全局运行npm i cnpm -g 5、注意webpack4.x 提供了约定大于配置的概念，目的是为了尽量减少配置文件的体积；默认约定了：在 webpack 4.x中，有一个很大的特性，就是约定大于配置打包的入口文件src-> index.js打包的输出文件是 dist - > main.js4.x中新增了node选项（必选项），可选的值是production和development 6、webpack命令会自动生成dist/main.js 7、webpack-dev-server 使用cnpm i webpack-dev-servser -D //webpack-dev-server 打包好的mian.js 是托管到了内存中，所以在项目根目录中看不到 //但是我们可以认为在项目根目录中有一个看不见的main.js 运行命令 npm run dev 实事打包编译 8、首页放内存中去 cnpm i html-webpack-plugin -D 在webpack.config.js中去设置 const path = require('path') const HtmlWebPackPlugin = require('html-webpack-plugin') //导入 在内存中自生成index 页面的插件 //创建一个插件的实例对象 const htmlPlugin = new HtmlWebPackPlugin({ template: path.join(__dirname,'./src/index.html'),//源文件 filename: 'index.html'//生成内存中首页的名称 }) //向外暴露一个打包的配置对象 //因为webpack是基于Node构建的，所以webpack支持所有的Node Api module.exports = { mode: 'development',//development production //在 webpack 4.x中，有一个很大的特性，就是约定大于配置 //约定，默认的打包入口路径是 src-》index.js plugins: [ htmlPlugin ] }这样再次打包npm run dev 就会把首页放入内存中去 就会直接在内存打开首页 网页源码 这个插件会自动添加一个script标签来引入main.js
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <!-- <script src="../dist/main.js"></script> --> <!-- <script src="/main.js"></script> --> </head> <body> <h1>这是首页</h1> <script src="main.js"></script></body> </html>