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

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

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

配置两个打包配置文件:

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

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

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

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

 //在package.json文件中配置scripts
"scripts": {
...
"dev":"webpack --config webpack-dev.config.js --color",
"prod":"webpack --config webpack-prod.config.js --color"
},

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

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

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

webpack配置不同打包配置的更多相关文章

  1. webpack多页面打包配置

    单页面应用:整个应用里面只有一个html文件.现在主流的框架,vue,react都是单页面应用. 所以webpack绝大部分都是对单页面打包.那么webpack如何对多页面进行打包 index.htm ...

  2. vue-cli+webpack打包配置

    vue-cli+webpack打包配置 一: 目录结构: ├── README.md ├── build │ ├── build.js │ ├── check-versions.js │ ├── ut ...

  3. 规范开发目录 及 webpack多环境打包文件配置

    规范开发目录 普通项目 开发目录: ├── project-name ├── README.md ├── .gitignore ├── assets ├── ├── js ├── ├── css ├─ ...

  4. webpack配置:打包第三方类库、第三方类库抽离、watch自动打包、集中拷贝静态资源

    一.打包第三方类库 下面说2种方法: 第一种: 1.引入jQuery,首先安装: npm install --save-dev jquery 2.安装好后,在index.js中引入,用jquery语法 ...

  5. Webpack安装配置及打包详细过程

    引言 前端经过漫长的发展,涌现出了很多实践方法来处理复杂的工作流程,让开发变得更加简便,其中,模块化可以使复杂的程序细化成为各个小的文件,而webpack并不强制你使用某种模块化方案,而是通过兼容所有 ...

  6. 【nodejs代理服务器二】nodejs webpack打包配置踩坑总结

    接着上篇用Nodejs开发web代理,防止web渗透.如果部署到正式环境,需要进行打包配置. 我在用webpack打包配置中遇到了几个错误,总结如下: webpack环境变量问题 https://ww ...

  7. webpack学习(二)初识打包配置

    前言:webpack打包工具让整个项目的不同文件夹相互关联,遵循我们想要的规则.想 .vue文件, .scss文件浏览器并不认识,因此webpage暗中做了很多转译,编译等工作. 事实上,如果我们在没 ...

  8. webpack配置自动打包重新运行npm run dev出现报错

    webpack配置自动打包重新运行npm run dev出现报错 运行npm run dev出现如下报错 Listening at http://localhost:8080(node:2328) U ...

  9. Webpack的基本配置和打包与介绍

    1. 前言 1.1 Webpack是什么 可能有很多的小伙伴对于这个Webpack既熟悉又陌生,有一些刚开始接触vue的小伙伴在对项目进行打包的时候经常会使用到npm run build来进行打包,但 ...

随机推荐

  1. 基于eclipse的java与mysql开发环境的搭建

    本文主要介绍  Java与MySQL的连接 1.安装jdk 略~ 园子里有很多 2.安装mysql 略~ 3.下载并安装JDBC,通过mysql官网下载  http://dev.mysql.com/d ...

  2. js手写数组Api--模拟实现常见数组Api

    数组的API经常用,但是api的内部实现还没研究过,于是就研究学习了下. 原文地址: https://www.cnblogs.com/yalong/p/11606865.html 数组的API的具体使 ...

  3. ajax的回调函数

    ajax的回调函数(done,fail,always) 观看代码: $.ajax({ type: "post",//请求的类型 url: "/book/detail?ac ...

  4. Mysql——常用命令

    查看版本:show variables like '%version%'   或者   select version() 是否开启binlog:show variables like 'log_bin ...

  5. Java日志体系(二)log4j

    1.1 简介 Log4j是一个由Java编写可靠.灵活的日志框架,是Apache旗下的一个开源项目: 使用Log4j,我们更加方便的记录了日志信息,它不但能控制日志输出的目的地,也能控制日志输出的内容 ...

  6. 解读Vue.use()源码

    Vue.use() vue.use()的作用: 官方文档的解释: 安装 Vue.js 插件.如果插件是一个对象,必须提供 install 方法.如果插件是一个函数,它会被作为 install 方法.i ...

  7. 网站后台扫描工具dirbuster、御剑的用法

    dirbuster DirBuster是Owasp(Open Web Application Security Project )开发的一款专门用于探测网站目录和文件(包括隐藏文件)的工具.由于使用J ...

  8. Servlet 使Session设置失效

    protected void service(HttpServletRequest request, HttpServletResponse response) throws ServletExcep ...

  9. jinfo 命令

    NAME jinfo - Generates configuration information. SYNOPSIS jinfo [ option ] pid 示例:jinfo 3245

  10. linux的route

    参考: https://blog.csdn.net/u011857683/article/details/83795435 老男孩: https://blog.51cto.com/oldboy/974 ...