zoukankan      html  css  js  c++  java
  • webpack配置不同打包配置

    • 生成环境与开发环境打包配置
    • 使用package.json配置npm run开启不同的打包配置

     。。。webpack基本使用最后一篇博客

    在上一篇博客中详细的演示了webpack开启本地服务和热更新,这个超级爽的技能你有没有发现问题呢?反正我是发现了,那就是只适合开发环境下使用,生成环境打包显然不合适,在前面的博客中也有提到过关于针对不同环境的打包,但没有具体演示怎么做,其实很简单,就是配置两套打包配置,至于要怎么执行具体的环境打包配置不必要在这里说明,毕竟每个项目和环境还有开发配置都不同,大家针对自己的需求配置就是了,这里只告诉你怎么开启不同打包配置命令:

    配置两个打包配置文件:

    1 //生成环境配置--配置文件名各位自己定义(我的配置名是:webpack-dev.config.js)
    2 module.exports = {
    3     mode:'development'
    4 }
    5 
    6 //生成环境配置--配置文件名各位自己定义(我的配置名是:webpack-prod.config.js)
    7 module.exports = {
    8     mode:'production'
    9 }

    然后通过npm指令开启不同打包配置:

    webpack --config webpack-dev.config.js//开启生成环境下的打包
    webpack --config webpack-prod.config.js//开启生成环境下的打包

    是不是觉得这样的指令敲起来很麻烦,这时候我们当然后必要将他变得简单一点:

    1 //在package.json文件中配置scripts
    2   "scripts": {
    3     ...
    4     "dev":"webpack --config webpack-dev.config.js --color",
    5     "prod":"webpack --config webpack-prod.config.js --color"
    6   },

    然后执行npm run ...就可以将原本很常的一条指令用简练的方式调用触发了:

    npm run dev//启动开发环境打包
    npm run prod//启动生产环境打包

    终于,webpack第一阶段的应用博客写完,后期慢慢研究一些关于webpack的底层实现和实际生产过程中遇到一些问题再来码一波。

  • 相关阅读:
    vs2005发布生成自定义dll
    模拟msn消息提示(右下角)
    通过GridView导出Excel
    在ASP.NET 2.0中直接得到本页面生成的HTML代码
    asp.net实现SQL Server备份还原
    通用分页存储过程算法(.net类实现)
    超链接打开自定义的协议
    GridView技巧2
    sql语句获取本周、本月数据
    asp.net开发自定义控件
  • 原文地址:https://www.cnblogs.com/ZheOneAndOnly/p/11124045.html
Copyright © 2011-2022 走看看