[转] 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

时间: 2024-11-08 07:59:29

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

笔记:配置 webpack dev server

笔记:配置 webpack dev server 安装 webpack-dev-server 组件 配置 webpack.config.js 配置 增加 html-webpack-plugin 组件 启动 webpack-dev-server 原文地址:https://www.cnblogs.com/F4NNIU/p/webpack-dev-server.html

vue模拟后台数据,请求本地数据的配置(旧版本dev-server.js,新版本webpack.dev.conf.js)

最近学习一个vue-cli的项目,需要与后台进行数据交互,这里使用本地json数据来模仿后台数据交互流程.然而发现build文件夹下没有dev-server.js文件了,因为新版本的vue-webpack-template 中已经去掉了dev-server.js,取而代之的是webpack.dev.conf.js文件,所以可以在webpack.dev.conf.js里配置本地访问. 对比旧版本的build文件夹,新版本的build下少了dev-server.js和dev-client.js 旧版

php最新版本配置mysqli

从官网上下载php后(我下的是php7.2.3版本),本想做个mysql的连接,但是无论怎么配置mysqli扩展,发现mysqli都没法用. 从百度上搜的那些方法都没法用,发现都是一些在php.ini中配置extension=php_mysqli.dll,事实上这句话没用了. 于是我仔细看了一下php.ini的配置文件,发现了一段话 ; Note : The syntax used in previous PHP versions ('extension=<ext>.so' and ; 'ex

Python3第三方组件最新版本追踪实现

一.说明 在安全基线中有一项要求就是注意软件版本是否是最新版本,检查是否是最新版本有两方面的工作一是查看当前使用的软件版本二是当前使用软件的最新版本.在之前的“安全基线自动化扫描.生成报告.加固的实现(以Tomcat为例)”中只是做了前一项把当前使用的软件版本查出来,并没有做当前使用软件的最新版本. 当然其实这也是没办法的事,因为基线扫描一般而言都是离线扫描,而追踪最新版本肯定需要联网查询:一般就一个应用来说,少说也会用到几十个第三方库,我们不如索性把最新版本追踪功能单独独立出来实现. 追踪最新

安装最新版本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", '  

STL源码剖析---根据最新版本的g++4.9.0(支持C++11)的修订(1)空间配置器

源码剖析采用的G++版本为2.91.57版本,是比较老的版本与最新版本4.9.0有某些方面的差别.现在我针对最新版本做一个分析.我下载了最新的gcc-4.9.0的包作为观察对象: 我们#include <>时的头文件放在:gcc-4.9.0/libstdc++-v3/include/std:例如vector. 真正的实现文件放在:gcc-4.9.0/libstdc++-v3/include/bits:例如:stl_vector,注意前面的stl_. 最后要说的是:技术是不断进步,不断发展变化的

Ruby安装配置(最新版本)

1.下载最新版本的rubyinstaller并安装http://rubyinstaller.org/downloads/ 如下图所示设置路径,我安装时将所有选项都打够了,免除了后面需要什么配置麻烦. 2.安装完后才能之后去Cmd命令中输入ruby -v ,并看到下图所示版本信息说明安装成功 3.接下来安装获得RubyGems 网址:https://rubygems.org 搜索点击然后选择下载格式并下载到本地解压. 在cmd中输入路径:D:\Software\Ruby\rubygems-2.6.

Linux CentOS6系统安装最新版本Node.js环境及相关文件配置

Node.js,当前应用非常广泛的Javascript运行环境,采用C++编写的,目前应用较多的用于WEB应用中,执行效率还是非常高的,虽然老左不从业程序的开发,但是有些时候在玩VPS的时候还是会遇到使用Node.JS环境基础的,比如这几天在玩HEXO轻博客程序的搭建有用到Nodejs环境配置,这不正好把基于CentOS6系统的配置记录下来. 因为,我们常用默认的CentOS系统中自带的Nodejs源版本比较低,有些时候兼容不是太好,所以,我们在安装和配置Node.js环境的时候还是直接手工安装