webpack-高级-发布策略

webpack的发布策略

  1. 在实际开发中,一般会有两套项目方案:
  • 一套是开发期间的项目,包含了测试文件、测试数据、开发工具、测试工具等相关配置,有利于项目的开发和测试,但是这些文件仅用于开发,发布项目时候需要剔除;
  • 另一套是部署期间的项目,剔除了那些客户用不到的测试数据测试工具和文件,比较纯净,减少了项目发布后的体积,有利于安装和部署!
  1. 为了满足我们的发布策略,需要新建一个配置文件,命名为webpack.publish.config.js,将webpack.config.js的配置拷贝过去,剔除一些开发配置项即可:
  • devServer节点删掉:
devServer: {
       hot: true,
       open: true,
       port: 4321
   }
  • plugins节点下的热更新插件删掉:
new webpack.HotModuleReplacementPlugin()
  1. 修改url-loader,将图片放入统一的images文件夹之下:
{ test: /\.(png|jpg|gif)$/, use: 'url-loader?limit=43959&name=images/[name].[ext]' }

或者使用img-前缀加上7位的hash名称

{ test: /\.(png|jpg|gif)$/, use: 'url-loader?limit=43959&name=images/img-[hash:7].[ext]' }
  1. package.json中的script节点下新增dev命令,通过--config指定webpack启动时要读取的配置文件:
"pub": "webpack --config webpack.publish.config.js"

每次重新构建时候删除dist目录

  1. 运行cnpm i clean-webpack-plugin --save-dev
  2. 在头部引入这个插件:
var cleanWebpackPlugin = require('clean-webpack-plugin');
  1. plugins节点下使用这个插件:
new cleanWebpackPlugin(['dist'])

分离第三方包改造webpack.publish.config.js

  1. 改造entry节点如下:
entry: {
        app: path.resolve(__dirname, 'src/js/main.js'), // 自己代码的入口
        vendors: ['jquery'] // 要分离的第三方包的入口
    }
  1. 在plugins节点下新增插件:
new webpack.optimize.CommonsChunkPlugin({ // 抽离第三方包的插件
        name:'vendors', // 指定抽离第三方包的入口名称
        filename:'vendors.js' // 抽离出的公共模块的名称
})
  1. html-webpack-plugin在生成index.html文件的时候,会自动将抽离的第三方包引入进去!

优化压缩JS

在plugins数组中添加:

new webpack.optimize.UglifyJsPlugin({ // 优化压缩JS
    compress:{
        warnings:false // 移除警告
    }
}),
new webpack.DefinePlugin({ // 设置为产品上线环境,进一步压缩JS代码
    'process.env.NODE_ENV': '"production"'
})

优化压缩HTML文件

plugins节点下的htmlWebpackPlugin插件中,添加minify子节点:

minify:{// 压缩HTML代码
    collapseWhitespace:true, // 合并空白字符
    removeComments:true, // 移除注释
    removeAttributeQuotes:true // 移除属性上的引号
}

其他优化项请参考:html-minifier - github

抽取CSS文件

  1. 运行npm install --save-dev extract-text-webpack-plugin安装抽取CSS文件的插件。
  2. 在配置文件中导入插件:
const ExtractTextPlugin = require("extract-text-webpack-plugin");
  1. 修改CSS和Sass的loader如下:
{
    test: /\.css$/, use: ExtractTextPlugin.extract({
        fallback: "style-loader",
        use: ["css-loader"],
        publicPath: '../' // 设置图片路径
    })
},
{
    test: /\.scss$/, use: ExtractTextPlugin.extract({
        fallback: "style-loader",
        use: ['css-loader', 'sass-loader'],
        publicPath: '../' // 设置图片路径
    })
}
  1. 在plugins节点下新增插件:
new ExtractTextPlugin("css/styles.css"), // 抽取CSS文件的插件

压缩抽取出来的CSS文件

  1. 运行cnpm i optimize-css-assets-webpack-plugin --save-dev安装插件到开发依赖。
  2. 在配置文件头部导入插件:
var OptimizeCssAssetsPlugin = require('optimize-css-assets-webpack-plugin');
  1. 在plugins节点下新增插件:
 new OptimizeCssAssetsPlugin() // 压缩CSS文件的插件

相关文章

  1. Sass 基础教程
  2. webpack-dev-server

原文地址:https://www.cnblogs.com/ygjzs/p/12198933.html

时间: 2024-11-09 10:35:12

webpack-高级-发布策略的相关文章

webpack发布策略

在开发阶段, 一般会有两套方案: 一套是开发期间的项目, 包含测试文件, 测试数据, 开发工具, 测试工具等相关配置, 有利于项目的开发和测试, 但是这些文件仅用于开发, 发布项目时候需要删除; 另一套是部署期间的项目, 剔除那些客户用不到的测试数据, 测试工具和文件, 比较纯净, 减少了项目发布的体积, 有利于安装和部署 ; 为了满足我们的发布策略, 需要新建一个配置文件, 命名为 webpack.publish.config.js 将 webpack.config.js 的配置拷贝过去, 剔

Kubernetes资源扩容、项目发布策略

Master扩容 100台node,2台master足够了 这个在集群中讲过,可以参考之前的 Node扩容 这个在集群中讲过,可以参考之前的 Pod 扩容 以下是手动扩容为5个kubectl scale --replicas=5 deployment php-demo -n test 以下是手动缩容为3个kubectl scale --replicas=3 deployment php-demo -n test 自动扩容还得在研究 项目发布策略 蓝绿发布现在我们公司用的就是蓝绿发布策略A组 预发

关于代码管理和发布策略

在平时的开发过程中,版本的安排和发布对于一个完整的开发团队来说是比较重要的部分,这关系到版本能否按时递交和测试的质量的控制. 下面来说下本人在工作过程中版本的安排: 1,代码流和对应的环境 一般项目应该有至少4条流是比较正常的. a, 本地测试环境(Main Test Env)---trunk b,客户测试环境(UAT Env)---UAT流 c,生产环境(Production Env)------Prod流 d,特殊需求开(SP Env)-----CR流 2,代码流直接的关系 3,详细的mer

Citrix XenApp/XenDesktop产品发布策略调整

在2016年的Citrix Summit大会上,Citrix对其核心产品XenApp/XenDesktop产品更新及发布周期提供了更为灵活而务实的发布规则,其将会对On Premise版本的XenApp/XenDesktop产品分成下面两种新的发布模式: 1. Long TermService Release,简称LTSR版本, 2. Current Release,简称CR版本. LTSR版本的主要特点为: 1. 每1~2年选定一个较为稳定的版本标定为LTSR版本,从此版本发布之日起将可以提供

线上版本灰度发布策略

从接触运维开始,最苦逼的事情就是业务上线,为什么这么说? 就是因为有了很多的大坑队友.不是因为开发的童鞋漏提代码,就是因为测试童鞋线下测试的不到位导致代码扔到线上后出现各种问题,各种404.近期和各位童鞋研究了应对这种现象的解决方案,得到了如下结果: 上线分为如下几种等级:测试发布.预发布.灰度发布.正式发布,下面分来来针对这四种发布介绍下区别. 测试发布:写完程序在线下测试,测试的过程和结果成为测试发布. 预发布:程序经历过测试发布后要把代码在线上部署一套(和生产环境一模一样的环境),使用生产

BGP 的路由发布策略

BGP Speaker只把自己使用的路由通告给对等体.(BGP Speaker只选最优的路径给自己使用,即只将最优路由发布给对等体:) BGP Speaker从EBGP获得的路由会向自己的所有的BGP对等体通告(包括EBGP对等体和IBGP对等体). BGP Speaker从IBGP对等体获得的路由不向它的IBGP对等体通告. BGP Speaker从IBGP获得的路由是否通告给它的EBGP对等体要依IGP和BGP同步的情况来决定. 从IBGP获得的路由仅发布给它的EBGP对等体: 关闭BGP同

webpack 功能大全 【环境配置】

1. webpack简介 webpack 是一个模块打包工具.它使得模块相互依赖并且可构建等价于这些模块的静态资源.相比于已经存在的模块打包器(module bundler),webpack的开发动机是实现代码分包(Code Splitting )和通过模块化完成代码的无缝集成.webpack可以根据项目需求合并代码,并且支持按需加载. webpack入门,可以参看:petehunt的Webpack howto webpack的实现目标是: 拆分依赖树(dependency tree)为多个按需

活动目录、组策略、批量创建用户综合篇

Contoso公司基础信息系统构建方案 1. Contoso公司的需求分析: 公司总共有60台计算机和五台服务器,根据公司的要求需要通过部署AD来构建公司的系统. ?根据公司的架构首先了部署活动目录域.根据容错和负载均衡的原则我们部署两台域控来满足高可用的要求.同时将计算机加入域. ? 在活动目录中创建公司的架构.创建相应的组织单位(OU). ? 通过power shell批量的创建用户账户. ? 通过默认的域组策略(Default domain policy)来限制用户的本地登录,同时在计算机

持续交付-发布可靠软件的系统方法pdf

下载地址:网盘下载 内容简介 编辑 <持续交付:发布可靠软件的系统方法>讲述如何实现更快.更可靠.低成本的自动化软件交付,描述了如何通过增加反馈,并改进开发人员.测试人员.运维人员和项目经理之间的协作来达到这个目标.本书由三部分组成.第一部分阐述了持续交付背后的一些原则,以及支持这些原则的实践.第二部分是本书的核心,全面讲述了部署流水线.第三部分围绕部署流水线的投入产出讨论了更多细节,包括增量开发技术.高级版本控制模式,以及基础设施.环境和数据的管理和组织治理. <持续交付:发布可靠软件