[转] webpack3最新版本配置研究(五) devtool,webpack-dev-server,CommonsChunkPlugin

devtool

devtool是webpack中config自带的属性只要使用就可以了不用安装 
webpack官网的解释如下 
当 webpack 打包源代码时,可能会很难追踪到错误和警告在源代码中的原始位置。例如,如果将三个源文件(a.js, b.js 和 c.js)打包到一个 bundle(bundle.js)中,而其中一个源文件包含一个错误,那么堆栈跟踪就会简单地指向到 bundle.js。这并通常没有太多帮助,因为你可能需要准确地知道错误来自于哪个源文件。为了更容易地追踪错误和警告,JavaScript 提供了 source map 功能,将编译后的代码映射回原始源代码。如果一个错误来自于 b.js,source map 就会明确的告诉你。 

//webpack.config.js
//在entry上面添加一个官方推荐的devtool:对于开发环境eval-source-map - 每个模块使用 eval() 执行,并且 SourceMap 转换为 DataUrl 后添加到 eval() 中。初始化 SourceMap 时比较慢,但是会在重构建时提供很快的速度,并且生成实际的文件。行数能够正确映射,因为会映射到原始代码中。
//添加属性
module.exports = {
  devtool: ‘eval-source-map‘
}
//注释掉压缩插件
// new webpack.optimize.UglifyJsPlugin({
//   compress: {
//     warnings: false,
//   },
//   output: {
//     comments: false,
//   }
// }),

//测试下报错信息,测完了删除
// index.js
consol.log(‘123‘);

然后编译一下会出现如下图 
 

webpack-dev-server

npm install webpack-dev-server

// package.json中script添加
"devServer": "webpack-dev-server --inline",
//webpack.config.js
const devServer = require(‘webpack-dev-server‘)
//module
devServer: {
    historyApiFallback:true,
    inline:true,
    contentBase: path.join(__dirname, "public"),
    compress: true,
    port: 9000
  }
 //plugin增加
 new webpack.HotModuleReplacementPlugin()

然后运行npm run derServer可以在localhost:9000/index.html看效果,使用这个的时候不会再生成public文件夹,所有的代码都会放在内存中!

CommonsChunkPlugin

CommonsChunkPlugin是webpack中自带的插件直接使用即可 
commonsChunkPlugin

//webpack.config.js
// 提供公共代码,plugins添加
// 默认会把所有入口节点的公共代码提取出来,生成一个common.js
//new webpack.optimize.CommonsChunkPlugin(‘common.js‘)
// 只提取index节点和extract节点
//new webpack.optimize.CommonsChunkPlugin(‘common.js‘,[‘index‘,‘extract‘])
//这里我们使用
new webpack.optimize.CommonsChunkPlugin({
   name: "common",
   minChunks:2  // 最少两个入口文件js同时引用时打包
})

//将webpack.config.js中用来push到plugins的程序修改下,加上push(‘common‘);
const htmlArray = [‘index‘,‘extract‘];
htmlArray.forEach((element) => {
  const chunksArray = [element];
  if (element === ‘index‘) {
    chunksArray.push(‘entry‘);
  }
  chunksArray.push(‘common‘);   // 公共代码打出来的包也被认为是个chunks所以可以在这里push引入
  const newPlugin = new HtmlWebpackPlugin({
    filename: element + ‘.html‘,
    template: element + ‘.html‘,   // 获取最初的html末班
    inject:  ‘body‘,          // -
    hash: true,               // 在生成的文件后面增加一个hash,防止缓存
    chunks: chunksArray
  });
  module.exports.plugins.push(newPlugin);
});

//新文件console.js
console.log(‘1234567‘);

//index.js和extract.js中增加
require(‘./console.js‘);

npm run webpack之后发现在common.js中有console.log(‘1234567’);而其他的index.js和extract.js就没有了,这样使得代码重用性更高,并且节省了文件更变时的带宽,还可以将多个地方要用的js打常用的包

原文地址:https://www.cnblogs.com/chris-oil/p/8563598.html

时间: 03-13

[转] webpack3最新版本配置研究(五) devtool,webpack-dev-server,CommonsChunkPlugin的相关文章

安装最新版本eclipse和配置tomcat

一.安装eclipse 注意:根据你电脑的位数选择 这是最新版本的 1.修改字体的大小 二.接下来配置Tomcat 1.下载Tomcat 9.0

ELK Stack最新版本测试二配置篇

阅读本文前请浏览 ELK Stack最新版本测试一安装篇 http://jerrymin.blog.51cto.com/3002256/1720109 详细配置如下: 一,客户端 1,nginx日志格式 log_format logstash_json '{ "@timestamp": "$time_iso8601", '                         '"host": "$server_addr", '  

【转】Android开发学习总结(一)——搭建最新版本的Android开发环境

最近由于工作中要负责开发一款Android的App,之前都是做JavaWeb的开发,Android开发虽然有所了解,但是一直没有搭建开发环境去学习,Android的更新速度比较快了,Android1.0是2008年发布的,截止到目前为止Android已经更新Android5.0.1,学习Android开发的第一步就是搭建Android的开发环境,博客园里面有不少人也写了关于如何搭建Android开发环境的文章,我也看了一下,但是感觉都比较旧了,对照着做不一定能够搭建成功,但是有些搭建步骤是还是可

【FastDev4Android框架开发】打造QQ6.X最新版本侧滑界面效果(三十八)

转载请标明出处: http://blog.csdn.net/developer_jiangqq/article/details/50253925 本文出自:[江清清的博客] (一).前言: 这两天QQ进行了重大更新(6.X)尤其在UI风格上面由之前的蓝色换成了白色居多了,侧滑效果也发生了一些变化,那我们今天来模仿实现一个QQ6.X版本的侧滑界面效果.今天我们还是采用神器ViewDragHelper来实现,之前我们以前基于ViewDragHelper的使用和打造QQ5.X效果了,基本使用方法可以点

Android开发学习总结(一)——搭建最新版本的Android开发环境【转】

最近由于工作中要负责开发一款Android的App,之前都是做JavaWeb的开发,Android开发虽然有所了解,但是一直没有搭建开发环境去学习,Android的更新速度比较快了,Android1.0是2008年发布的,截止到目前为止Android已经更新Android5.0.1,学习Android开发的第一步就是搭建Android的开发环境,博客园里面有不少人也写了关于如何搭建Android开发环境的文章,我也看了一下,但是感觉都比较旧了,对照着做不一定能够搭建成功,但是有些搭建步骤是还是可

Visual Studio 2017 RC 下载 最新版本的发行说明

我们非常荣幸地宣布 Visual Studio 2017 RC 现已推出! 此新版本包括我们最新的功能创新和改进. 注意 这里是 Visual Studio 2017 最新版本的发行说明. 下载:Visual Studio Enterprise 2017 RC 若要了解有关其他相关下载的详细信息,请参阅下载页. 另请参阅 Visual Studio 2017 系统要求和 Visual Studio 2017 平台目标以及兼容性. 重要事项 虽然一般情况下支持在生产环境中使用 Visual Stu

mydumper 最新版本0.9.1 ,备份必备工具。

1.下载地址 https://launchpad.net/mydumper/+download 2.安装 新版本支持GTID 0.9.1 ,因为我维护的数据库都启用了GTID. yum install gcc-c++ cmake glib2-devel pcre-devel.x86_64  -y tar -zxvf mydumper-0.9.1.tar.gz -C /usr/local/ cd /usr/local/mydumper* cmake . echo $? make make inst

Elasticsearch最新版本2.20特性及如何安装

版本选择:Elasticsearch最新版本2.20 Elasticsearch的更新速度实在太快了,16年2月2日更新到了2.2版本,首先看一下这个版本增加了哪些新的特性.首先是基于Lucene 5.4.1,修复了Elasticsearch 2.1.2和Elasticsearch 1.7.5版本中存在的很多bug,同时Elasticsearch 2.2.0增加了两个很棒的新功能:查询分析器和增强地理位置字段.这个版本增加了更加严格的安全性和修复了2.1的一个重大bug,就是在分片恢复的时候会非

Spring事务配置的五种方式

Spring事务配置的五种方式 前段时间对Spring的事务配置做了比较深入的研究,在此之间对Spring的事务配置虽说也配置过,但是一直没有一个清楚的认识.通过这次的学习发觉Spring的事务配置只要把思路理清,还是比较好掌握的. 总结如下: Spring配置文件中关于事务配置总是由三个组成部分,分别是DataSource.TransactionManager和代理机制这三部分,无论哪种配置方式,一般变化的只是代理机制这部分. DataSource.TransactionManager这两部分

WebMisSharp升级说明,最新版本1.6.0

尊敬的C3 AM.C3 FX.WebMisSharp用户您好: 非常感谢长期来您对WebMisSharp系列产品的支持,您的使用和反馈是我们进步的最大动力.在你们的帮助下我们又向前迈进了一步,我们功能升级啦!!! 本邮件为作者JackChain群发,您可能仅是某一个产品的使用者,或许您已经忘记这些产品.没关系,我简单提醒下: C3 AM:企业级通用权限管理系统,SAAS平台,体验地址http://saas.chinacloudtech.com C3 FX:企业级快速开发框架,是配合WebMisS