webpack

好久不看 webpack 已经从 3到4了，其实很早到今年2月份就开始发布 webpack 4 的 beta 版本； 每一次 webpack 的升级都还是建议阅读下 《webpack 4: released today! - Sean T. Larkin》。你需要明白，为什么 webpack又要迭代一个新的里程碑，以及带了什么新的特性； 这里简单总结下: Faster！！！ Webpack 在 bundle bundle 的时间会缩短至少 60 个点，最高可以到 98%; (我们似乎可以节省一些时间去这些事情) Mode 增加了新的属性，来支持 development 和 production 的区别，从而达到更好的优化效果； CommonsChunkPlugin 不将启用；取而代之的新的 API optimization.splitChunks; WebAssembly 的支持，现在默认支持 import export 详情 »

由于需要支持 IE8 ，因此我们直接使用 babel 转换出来的 es5 代码在 IE8 上并不能很好的运行，而且修复这个问题会让大家 头痛 ヽ(｀Д´)ﾉ。 大概这里简单说下解决问题的一些关键方法吧。 es3ify-loader es3ify-loader 大概是第一个让你看到希望的。你需要在 postLoaders 或者放在 babel 转换前。 module: { loaders: [ { test: /\.js?$/, loaders: ['es3ify-loader'], }, { test: /\.js?$/, loaders: ['babel-loader'], }, ] } 这个是可以解决抛出 default 关键词的问题， 比如我们会看到 这样的问题： expected identifier es5-shim 当然这个问题解决后面，可能还会遇到这个问题: Exception throw and not caught 你可以在入口文件引入 require('es5-shim') require('es5-shim/es5-sham') 如果还是错误定位到 defineProperty 详情 »

我们现在已经非常习惯使用 Webpack 进行 JS 模块的打包处理。当然有的时候我们在优化代码的时候需要对所引用的模块进行体积分析，从而进行代码优化。当然这些工具有很多了，今天主要说下 webpack-visualizer。 webpack-visualizer 是一款 webpack模块分析插件，使用非常简单，你只需要： npm install webpack-visualizer-plugin --save-dev 然后编辑你的 webpack 配置文件： var Visualizer = require('webpack-visualizer-plugin'); //... plugins: [new Visualizer({ filename: './statistics.html' })], //... 然后打包的时候会在 打包目录下生产一个静态网页 statistics.html.打开你就可以看到各个模块的百分比，以及压缩包大小了。 详情 »

Webpack2 已经出来许久，但是由于配置写法的变化，很多人还没有迁移。关于 webpack2 的一些变化可以阅读这篇文章 What's new in webpack 2。 如果你计划从 webpack2 迁移到 webpack2 的话，关于配置如何进行更改可以从 这里 知道。但是今天主要是推荐另外一个命令行工具 webpack CLI。 它可以快速的生成webapack 配置和 进行配置迁移。 快速开始 首先我们得全局安装 webpack-cli： npm install -g webpack-cli 安装完成后我们可以通过使用 webpack-cli init webpack-addons-demo 来初始化一个配置目录文件，文件内容可以看 这里。当然webpack的目录模板也是可以自己开发的。 webpack 迁移 使用 webpack-cli 可以方便的完成我们从 v1 迁移到 v2。 直接使用命令: webpack-cli migrate webpack.config.js webpack 详情 »

webpack dev server 2.0 配合着下新版本的webpack2面世，最近项目的配置也在迁移到webpack2上来的。推荐阅读 Migrating from v1 to v2 webpack dev server在这次升级中发生了很多变化，下面罗列一些和你开发相关围绕紧密一些更新点: 只能配合weexpack2使用，所以升级请把相关依赖全部升级上去. inline 命令现在默认放到了命令行支持中，如果需要取消加上--no-inline 取消掉一些不必要的console输出,比如当服务器关掉后，还一直出现error信息。 clientLogLevel 允许你控制你设置console 输出的信息 8080端口被占用了，现在不用担心了，新的体系会自己寻找可以使用的端口 开始支持web-worker 以及非web平台的使用比如(Electron) 对于http2 的支持。 关于更多relaese 的更新可以关注changelog 更多阅读 What’s new in webpack dev server 2.0 getting-started-with-webpack-2 What's new in webpack 2 详情 »

一般大多情况可能我们都只会遇到一次性打包的情况。偶尔我们可能需要正对同样的内容打包两份不同的文件。这个时候也非常好办，就是把配置放到一个数组里即可。 var path = require("path"); var webpack = require("../../"); module.exports = [ { name: "mobile", entry: "./example", output: { path: path.join(__dirname, "js"), filename: "mobile.js" }, plugins: [ new webpack.DefinePlugin({ ENV: JSON.stringify("mobile") }) ] }, { name: "desktop", entry: "./example" 详情 »