生产编译步骤 源代码->webpack->bundle(资源文件,能够让浏览器识别)

开发环境的配置

首先要让项目运行需要先安装webpack-dev-server

npm i webpack-dev-server -D

• 开发环境配置: 能让代码运行

• 运行项目指令: npx webpack serve

• webpack 会将打包结果输出出去

webpack.config.js配置devServer

devServer: 运行项目的相关配置

module.exports = {
//... 其他配置省略
// 简单的配置
  devServer:{
    contentBase: resolve(__dirname, 'built'), // contentBase是用来指定被访问html页面所在目录的；
    compress: true, // // 一切服务都启用gzip 压缩：
    port: 8888, // 端口号
    open: true // 是否自动打开浏览器
  }
}

demo地址

借鉴视频: B站尚硅谷