【webpack】config/index.js

// see http://vuejs-templates.github.io/webpack for documentation.
var path = require(‘path‘)

module.exports = {
  build: {// 构建产品时使用的配置
    env: require(‘./prod.env‘),// webpack的编译环境
    index: path.resolve(__dirname, ‘../dist/index.html‘),// 编译输入的index.html文件
    assetsRoot: path.resolve(__dirname, ‘../dist‘),// webpack输出的目标文件夹路径
    assetsSubDirectory: ‘static‘,// webpack编译输出的二级文件夹
    assetsPublicPath: ‘/‘,// webpack编译输出的发布路径
    productionSourceMap: true,// 使用SourceMap
    // Gzip off by default as many popular static hosts such as
    // Surge or Netlify already gzip all static assets for you.
    // Before setting to `true`, make sure to:
    // npm install --save-dev compression-webpack-plugin
    productionGzip: false,// 默认不打开开启gzip模式
    productionGzipExtensions: [‘js‘, ‘css‘],// gzip模式下需要压缩的文件的扩展名
    port: 9000
  },
  dev: {// 开发过程中使用的配置
    env: require(‘./dev.env‘),// webpack的编译环境
    port: 8080,// dev-server监听的端口
    assetsSubDirectory: ‘static‘,
    assetsPublicPath: ‘/‘,
    proxyTable: {},// 请求代理表,在这里可以配置特定的请求代理到对应的API接口
    // CSS Sourcemaps off by default because relative paths are "buggy"
    // with this option, according to the CSS-Loader README
    // (https://github.com/webpack/css-loader#sourcemaps)
    // In our experience, they generally work as expected,
    // just be aware of this issue when enabling this option.
    cssSourceMap: false  // 是否开启 cssSourceMap
  }
}
时间: 2024-08-03 03:54:46

【webpack】config/index.js的相关文章

【webpack】-- 样式加载

加载css需要用到css-loader和style-loader css-loader将@import 和 url 处理成正规的ES6 import ,如果@import指向的是一个外部资源,css-loader会跳过,而只会对内部资源做处理.css-loader处理之后,style-loader会将输出的css注入到打包文件中.css默认是inline模式,且实现了HMR接口.但inline不太适用于生产环境(全部输出在页面上).还需要用extracttextplugin生成一个单独的css文

【webpack】-- 模块热替换

全称是Hot Module ReplaceMent(HMR),理解成热模块替换或者模块热替换都可以吧,和.net中的热插拔一个意思,就是在运行中对程序的模块进行更新.这个功能主要是用于开发过程中,对生产环境没有任何帮助(这一点区别.net热插拔).效果上就是界面的无刷新更新. HMR基于WDS,style-loader可以通过它来实现无刷新更新样式.但是对于JavaScript模块就需要做一点额外的处理,怎么处理继续往下看.因为HMR是用于开发环境的,所以我们修改下配置,做两份准备.一个用于生产

【webpack】理解配置文件

学习链接: http://blog.csdn.net/hongchh/article/details/55113751 https://segmentfault.com/a/1190000009356434 主要分析开发(dev)和构建(build)两个过程涉及到的文件,故下面文件结构仅列出相应的内容. ├─build │ ├─build.js │ ├─check-versions.js │ ├─dev-client.js │ ├─dev-server.js │ ├─utils.js │ ├─v

【翻译】使用Ext JS设计响应式应用程序

原文:Designing Responsive Applications with Ext JS 在当今这个时代,用户都希望Web应用程序无论在形状还是大小上,既能在桌面电脑,也能在移动设备上使用.使应用程序能适应不同的需求渐成趋势.幸运的是,Ext JS 5提供了所有支持应用程序以符合任何屏幕尺寸.形状和方向的工具. responsiveConfig概述 要让Ext JS 5支持新的平板电脑,需要使用"responsiveConfig",一个强大的新功能,可以让应用程序根据屏幕大小和

【翻译】在Ext JS和Sencha Touch中创建自定义布局

原文:Creating Custom Layouts in Ext JS and Sencha Touch 布局系统是Sencha框架中最强大和最独特的一部分.布局会处理应用程序中每个组件的大小和位置,因而,不需要手动去管理那些碎片.Ext JS与Sencha Touch的布局类有许多相似之处,最近在 Ivan Jouikov的这篇博文中对他们进行了详细的分析. 虽然是这样,但很多Ext JS和Sencha Touch开发人员可能永远都不会去了解布局系统的机制原理.Sencha框架已经提供了最常

vue-cli脚手架npm相关文件说明(9)config/index.js

系列文章传送门: 1.build/webpack.base.conf.js 2.build/webpack.prod.conf.js 3.build/webpack.dev.conf.js 4.build/utils.js 5.build/vue-loader.conf.js 6.build/build.js 7.build/dev-server.js 8.build/check-versions.js 9.../config/index.js 下面是config/index.js中相关代码和配

【翻译】在Ext JS 5应用程序中如何使用路由

原文:How to Use Routing in Your Ext JS 5 Apps 简介 Ext JS 5是一个重要的发布版本,它提供了许多新特性来创建丰富的.企业级的Web应用程序.MVVM和双向数据绑定为开发人员承担了大量的繁重工作.在Ext JS 5种,另一个新特性就是路由,它可以在控制器内轻松的管理历史记录.前进和后退按钮是每个浏览器都会拥有的公共用户接口,现在,使用Ext JS 5在单页面应用程序中处理导航变得相当简单了. Ext JS 5路由 在Ext JS,已经可以使用Ext.

【心得】怪异的JS的Date函数

我们知道new Date('2013/1/1')是2013年1月1日, 那么new Date('2013/1/366')会报无效日期格式吗?答案是,这是一个有效的日期,但是他是表示2014年1月1日. 相当于2013/1/1+365d. 那么new Date('2012/1/367')是2013年1月1日,我想说的是,内部已经处理闰年的情况了. 会有什么问题?假设我们把'2013/1/366'传到数据库,用数据库的Convert(datetime,'2013/1/366')转换时会这样: 从 c

【原】Bootstrap+Knockout.JS+ASP.Net MVC3+PetaPOCO实现CRUD操作

1.需求: 1.1)页面要美观大气 1.2)前端代码要简洁清晰,要用MVC或是MVVM框架 1.3)服务端要用MVC框架,要Rest风格 1.4)数据访问要用ORM 2.效果: 2.1)列表 2.2)分页 2.3)新增 2.4)修改 3.技术考虑: 3.1)考虑到页面的美观大气,在没有美工的情况下,Bootstrap的确是一个很好的选择 3.2)前端框架选择了MVVM的Knockout.JS,大概是因为Microsoft在自己的项目模板里都自带了这个框架吧,所以一直对它挺有好感 3.3)ASP.