您当前的位置： 首页 > 学无止境 > JS经典实例 网站首页JS经典实例

webpack配置开发环境与生产环境

发布时间：2020-04-04 12:00:23编辑：雪饮阅读（）

 

Package.json

{
  "name": "module",
  "version": "1.0.0",
  "description": "",
  "main": "main.js",
  "scripts": {
    "dev": "webpack --config ./webpack.dev.config.js",
    "prod": "webpack --config ./webpack.prod.config.js"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "webpack": "^3.12.0"
  }
}

Webpack.dev.config.js

 // webpack ./main.js  ./build.js
 module.exports = {
    // 入口
    entry:{
       // 可以有多个入口，也可以有一个，如果有一个就默认从这一个入口开始分析
       "main":'./main.js'
    },
    output:{
       filename:'./build.js'
    },
    watch:true,//文件监视改动 自动产出build.js
 }

这里watch可使得你的vue代码改变后免于再次手动编译，而是自动编译，然后只需要你浏览器里面刷新下即可

Webpack.prod.config.js

 // webpack ./main.js  ./build.js
 module.exports = {
    // 入口
    entry:{
       // 可以有多个入口，也可以有一个，如果有一个就默认从这一个入口开始分析
       "main":'./main.js'
    },
    output:{
       filename:'./build.js'
    }
 }

开发环境运行npm run dev

就会卡在这个界面，很像linux中的非后台进程



 

此时若有vue文件改动则只需要在浏览器刷新index.html即可，会自动生成build.js

 

开发环境运行npm run prod

 

然后会直接输出如下