• dist
  --img
  --js
  --css
  
• src
  --img
  --js
  --css
  --font
  --index.html
  --index.js
  --page_1.html
  --page_1.js
  
• package.json
  
• webpack-dist.config.js 生产环境配置
  
• webpack.config.js 开发环境配置
  
• README.md
  
  

1.我们在开发的时候要用到热更新(就是每次编辑代码浏览器自动刷新)这就需要一个虚拟服务器读文件所以涉及路径问题 我们不区分环境时候打包后的代码资源路径报错会找不到资源。

2.还有某些插件要在最后build 的时候才可以用到比如压缩 抽离公共模块 路径的处理,如果不分环境每次npm run dev 时候都会启动浪费时间

1.首先建立两个配置
webpack.config,js --开发环境
webpack-dist.config,js --生产环境

2.在package.json 中修改启动后的映射如下

"scripts": {
 "test": "echo \"Error: no test specified\" && exit 1",
 "dev": "webpack-dev-server --devtool eval-source-map --progress --colors --config webpack.config.js --hot --inline --content-base ./dist",
 "build": "webpack --progress --colors --config webpack-dist.config.js"
 },

2.1. 在执行 npm run dev 映射到webpack.config.js 同时启动 webpack-dev-server 这个热更新插件(调试服务器)
2.2. 在执行 npm run build 映射webpack-dist.config.js 执行打包是需要的插件并打包输出