webpack插件& loader篇 - 简书
webpack插件& loader篇
webpack入门中 列出了下面这些插件
plugins: [
CopyWebpackPlugin...,
webpack.ProvidePlugin...,
webpack.optimize.DedupePlugin...,
ExtractTextPlugin...,
monsChunkPlugin,
WebpackNotifierPlugin...,
webpack.DllReferencePlugin...
本篇则对它们做一个介绍
插件分文webpack内置插件 和 要外部插件。
内置插件通过 webpack.xxx来使用外部插件要npm install来安装require
CopyWebpackPlugin 拷贝资源插件
顾名思义 对资源文件进行拷贝黏贴
CopyWebpackPlugin([
from :'html',
context: 'global/img',
from: '**/*',
to:'img/common'
from: 'img',
from :'global/lib/es5-shim-sham.js'
定义要拷贝的源目录to
定义要拷盘的目标目录context 上下文flatten
只拷贝文件不管文件夹
默认是falseignore
忽略拷贝指定的文件
可以用模糊匹配force
强制覆盖先前的插件
可选 默认false
webpack.ProvidePlugin 全局挂载插件
new webpack.ProvidePlugin({
$: "jquery",
jQuery: "jquery",
"window.jQuery": "jquery"
当模块使用这些变量的时候,wepback会自动加载 不用再去requre
webpack.NoErrorsPlugin
不显示错误插件
webpack.optimize.DedupePlugin
查找相等或近似的模块，避免在最终生成的文件中出现重复的模块
webpack.optimize.UglifyJsPlugin 丑化js 混淆代码
monsChunkPlugin 提取公共代码的插件
new monsChunkPlugin('common.js')
当你的 webpack 构建任务中有多个入口文件，而这些文件都 require 了相同的模块，如果你不做任何事情，webpack 会为每个入口文件引入一份相同的模块，显然这样做，会使得相同模块变化时，所有引入的 entry 都需要一次 rebuild，造成了性能的浪费，CommonsChunkPlugin 可以将相同的模块提取出来单独打包，进而减小 rebuild 时的性能消耗。
WebpackNotifierPlugin 编译完成后给一个Notifier提示
new WebpackNotifierPlugin({
title: 'Webpack 编译成功',
contentImage: path.resolve(process.cwd(), './global/img/logo.png'),
alwaysNotify: true
webpack.DllReferencePlugin
除了正在开发的源代码之外，通常还会引入很多第三方 NPM 包，这些包我们不会进行修改，但是仍然需要在每次 build 的过程中消耗构建性能，那有没有什么办法可以减少这些消耗呢？DLLPlugin 就是一个解决方案，他通过前置这些依赖包的构建，来提高真正的 build 和 rebuild 的构建效率。
具体在 webpack优化中讲
ExtractTextPlugin
独立出css样式
如果我们希望样式通过\&link\&引入，而不是放在 \&style\&标签内呢，即使这样做会多一个请求。
这个时候我们就要配合插件一起使用啦。
var ExtractTextPlugin = require("extract-text-webpack-plugin");
module.exports = {
// ...省略各种代码
loaders: [
{test: /\.js$/, loader: "babel"},
{test: /\.css$/, loader: ExtractTextPlugin.extract("style-loader", "css-loader")}
plugins: [
new ExtractTextPlugin("[name].css")
extract-text-webpack-plugin 提取样式插件
项目中没有使用
功能是 将css放到index.html的body上面
plugins: [
new CopyWebpackPlugin([
from :'html',
context: 'global/img',
from: '**/*',
to:'img/common'
from: 'img',
from :'global/lib/es5-shim-sham.js'
context :'global/lib/swfupload',
from: '**/*',
to:'swfupload'
new webpack.ProvidePlugin({
$: 'jquery',
jQuery: 'jquery',
_: 'underscore',
React: 'react',
ReactDOM: 'react-dom'
new webpack.optimize.DedupePlugin(),
new WebpackNotifierPlugin({
title: 'Webpack 编译成功',
contentImage: path.resolve(process.cwd(), './global/img/logo.png'),
alwaysNotify: true
new ExtractTextPlugin("[name].css"),
new monsChunkPlugin({
name: 'common',
minChunks: Infinity
new webpack.DllReferencePlugin({
context: __dirname,
manifest: require('./lib/manifest.json')
loader 本身是一个javascript模块 需要通过npm install 对应的loader
babel-loader ,
css-loader,
less-loader,
sass-loader,
file-loader,
html-loader,
url-loader,
style-loader,
json-loader
test: /\.js[x]?$/,
exclude: /(node_modules)|(global\/lib\/)/,
include: '',
loader: 'babel-loader'
遇到 .js 和 .jsx 后缀的用 babel-loader来解析跳过exclude中的文件。包含include中的文件
style-loader 会将css代码打入html的style标签里css-loader 会生成一个css文件
在栗子中， 我们用了 ExtractTextPlugin.extract 插件
ExtractTextPlugin的extract方法有两个参数，第一个参数是经过编译后通过style-loader单独提取出文件来，而第二个参数就是用来编译代码的loader。
test: /\.css$/,
loader: ExtractTextPlugin.extract('style-loader', 'css-loader?sourceMap&-convertValues')
test: /\.rcss$/,
loader: ExtractTextPlugin.extract('style-loader', 'css-loader?modules&sourceMap&-convertValues!sass-loader?sourceMap')
test: /\.less$/,
loader: ExtractTextPlugin.extract('style-loader', 'css-loader?sourceMap&-convertValues!less-loader')
test: /\.scss$/,
loader: ExtractTextPlugin.extract('style-loader', 'css-loader?sourceMap&-convertValues!sass-loader?sourceMap')
css-loader!xxx-loader 表示先执行xxx-loader再css-loader
.rcss中 加了一个 modules 参数 代表开启 css modules
-convertValues 是为了解决css压缩有的一个坑。 css 压缩有会把 px 转化为 pc pt
图片loader 包括 各种其他文件
test: /\.(png|jpg|gif|woff|woff2|ttf|eot|svg|swf)$/,
loader: "file-loader?name=[name]_[sha512:hash:base64:7].[ext]"
输出 name_ + 7位base64编码 + 后缀
test: /\.json$/,
loader: "json"
loaders: [{
test: /\.js[x]?$/,
exclude: /(node_modules)|(global\/lib\/)/,
loader: 'babel-loader'
test: /\.css$/,
loader: ExtractTextPlugin.extract('style-loader', 'css-loader?sourceMap&-convertValues')
test: /\.rcss$/,
loader: ExtractTextPlugin.extract('style-loader', 'css-loader?modules&sourceMap&-convertValues!sass-loader?sourceMap')
test: /\.less$/,
loader: ExtractTextPlugin.extract('style-loader', 'css-loader?-convertValues!less-loader')
test: /\.scss$/,
loader: ExtractTextPlugin.extract('style-loader', 'css-loader?sourceMap&-convertValues!sass-loader?sourceMap')
test: /\.(png|jpg|gif|woff|woff2|ttf|eot|svg|swf)$/,
loader: "file-loader?name=[name]_[sha512:hash:base64:7].[ext]"
test: /\.html/,
loader: "html-loader?" + JSON.stringify({
minimize: false,
attrs:false
test: /\.json$/,
loader: "json"WebPack安装：使用-Loader-配置-插件-环境-排错详解（下扩展）
详细介绍WebPack的插件、命令和package的配置，涉及到Webpack打包性能优化和使用技巧，适合比较了解WebPack的同学学习。
详细介绍WebPack的插件、命令和package的配置，涉及到Webpack打包性能优化和使用技巧，适合比较了解WebPack的同学学习。
package.json(包括更多的webpack命令)
NPM是随同NodeJS一起安装的包管理工具，能解决NodeJS代码部署上的很多问题。NPM可以从服务器下载别人编写的第三方包或命令行程序到本地使用,也可以将自己编写的包或命令行程序上传到服务器供别人使用。使用npm init命令可以自动创建这个package.json文件,输入这个命令后,终端会问你一系列诸如项目名称,项目描述,作者等信息,不过不用担心,如果你不准备在npm中发布你的模块,这些问题的答案都不重要,回车默认即可。
如果package.json格式错误，打包时会报 ERROR in Entry module not found: Error: Cannot resolve 'file' or 'directory'让人很摸不着头脑，添加参数--display-error-details 才知道是package.json解析错误。npm的start是一个特殊的脚本名称,它的特殊性表现在,在命令行中使用npm start就可以执行相关命令,如果对应的此脚本名称不是start,想要在命令行中运行时,需要这样用npm run {script name}如npm run build。
package.json文件内部就是一个JSON对象，该对象的每一个成员就是当前项目的一项设置。
下面是一个更完整的package.json文件:
"name": "项目名称",
"version": "1.0.0",
"description": "项目描述",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
//项目命令行缩写
"keywords": ["node.js","javascript"],
"author": "作者信息",
"license": "ISC",
"dependencies": {
"webpack": "^1.13.3"
"devDependencies": {
"webpack-dev-server": "^1.16.2"
package.json文件的部分字段的含义如下:
name 项目名称(必须),是一个字符串
version 项目版本号(必须),是一个字符串
description 项目描述,是一个字符串
main 字段指定了加载该模块时的入门文件,默认是模块根目录下面的index.js,,是一个字符串
scripts 指定了运行脚本命令的npm命令行缩写,比如start指定了运行npm run start时，所要执行的命令,是一个对象
keywords npm包的关键字，是一个字符串的数组,如["node.js","javascript"]
author 作者个人信息,,是一个字符串
license 指定一个license来让用户知道他们的使用权利和和任何限制
dependencies 指定了项目运行所依赖的模块
devDependencies 指定项目开发所需要的模块
更多的配置资料:
WebPack命令参数含义:
基本命令:webpack
本地服务器命令:webpack-dev-server
React生产环境命令:NODE_ENV=production
--watch 可以改变一个文件而让webpack实时编译,也可以在配置文件中配置。
--config webpack.production.config.js 可以把默认的配置文件webpack.config.js改成自定义文件,便于开发环境和生产环境切换。
--progress 可以显示编译进度
--colors 输出结果带彩色，比如：会用红色显示耗时较长的步骤
--config 输出性能数据，可以看到每一步的耗时
--content-base build 或者 --content-base ./build 可以修改本地服务器webpack-dev-server的路径,默认是根目录
-p 默认使用UglifyJsPlugin这个插件,但是会报警告,所以按照需求在配置文件中配置,一般不直接使用
--devtool eval 配置Source Maps(提高调试效率),有多个选项。
插件（Plugins）是用来拓展Webpack功能的,使webpack更加的灵活和强大,它们会在整个构建过程中生效,执行相关的任务。webpack有两种类型的插件:webpack内置的插件(安装webpack之后不需要安装,直接配置就可以)和webpack外置插件。一般情况下我们会创建一个开发的webpack.config.js文件和一个生产的webpack.product.config.js文件,开发的webpack.config.js在前几篇中博客(WebPack安装-使用-Loader-配置-插件-环境-排错详解)中已经讲述过,本文开始位置和结束位置都有链接。首先新创建一个webpack.product.config.js的文件作为我们的生产配置文件,可以把webpack.config.js文件中的内容复制到webpack.product.config.js中,然后再按照需求添加一些生产环境需要的配置。
使用插件减少编译后js文件的体积和优化编译后的js文件,下面是优化过程:
(1)插件 (2)插件 (3)插件 (4)插件 (5)配置 (6)插件 (7)插件
171kb-----&171kb-----&55.9kb-----&35.1kb-----&30.16kb-----&26.76kb-----&说明-----&说明
步骤(4)插件和(5)配置的说明:33.2+1.56=34.76kb(只分离css)/31.7+2.59=34.29kb(分离css和scss)/27.9+2.66=30.16(分离css和scss和less),分离完css之后可以按需分离图片,分离图片之后js文件变小大小不变24.1+2.66=26.76kb
步骤(6)插件说明:4.16(bundle本身业务逻辑)+2.66(css样式)+143(vendor第三方库) = 149.82kb,由于这里只是一个DEMO编译后js文件的体积比较小,如果你打包一个几M的项目,这里是可以看到明显的效果的。
步骤(7)插件说明:4.15(bundle本身业务逻辑)+2.66(css样式)+141(vendor第三方库) = 147.81kb,如果你是比较小的DEMO,按照需求去掉步骤(6)插件,直接使用步骤七
(1)实现版权声明的插件
var webpack = require('webpack');//声明webpack
plugins: [
new webpack.BannerPlugin("这里写版权声明和作者信息等。")//在这个数组中new一个就可以
说明:这个插件可以让你打包出来的文件,不管是js还是css都能带上你的版权申明和作者信息等
(2)实现压缩混淆的插件
var webpack = require('webpack');//声明webpack
new webpack.optimize.UglifyJsPlugin({
// remove all comments(注释)
comments: false
compress: {
//不显示警告
warnings: false
//mangle 通过设置except数组来防止指定变量被改变 (防止指定变量被混淆)
except: ['$super', '$', 'exports', 'require']
说明:UglifyJsPlugin还可以设置更多的选项来满足个性化需求,默认情况下没有配置UglifyJsPlugin插件的时候,使用webpack -p默认使用这个插件,但是会报警告,所以按照需求配置。UglifyJsPlugin它既可以压缩js代码也可以压缩css代码,其实并不能说是在压缩css代码，本质来说还是压缩js代码，再将这块代码输出到css文件中。
UglifyJsPlugin更多的配置参考:英文资料:中文资料:
(3)实现React切换到产品环境的插件
var webpack = require('webpack');//声明webpack
new webpack.DefinePlugin({
'process.env': {
NODE_ENV: JSON.stringify(process.env.NODE_ENV),
说明:这时候打包的时候命令要带上node的环境设置NODE_ENV=production,原来的命令接到后面,类似如下命令
NODE_ENV=production webpack --progress --colors --config webpack.product.config.js
更多配置资料：
(4)实现分离css的插件
安装extract-text-webpack-plugin命令:
npm install extract-text-webpack-plugin --save-dev
申明ExtractTextPlugin插件:
var ExtractTextPlugin = require("extract-text-webpack-plugin");
test:/\.css$/,
// loader:'style-loader!css-loader'
loader:ExtractTextPlugin.extract("style-loader","css-loader")
test:/\.(scss|sass)$/,
//loader:'style-loader!css-loader!sass-loader'
loader:ExtractTextPlugin.extract("style-loader", "css-loader!sass-loader")
test:/\.less$/,
//loader:'style-loader!css-loader!less-loader'
loader:ExtractTextPlugin.extract("style-loader", "css-loader!less-loader")
说明:less和scss和css你可以按照你自己的需求配置
new ExtractTextPlugin("entry.bundle.css")
CSS分理成多个CSS文件资料:
(5)通过配置图片加载器的参数减少编译后js文件的体积
test: /\.(png|PNG|jpg|JPG|jpeg|JPEG|gif|GIF)$/,
loader: 'url-loader?limit=8192&name=img/[hash].[ext]'
默认limit这里是8192字节,超过默认的图片打包到文件夹中,没有超过默认的图片打包到bundle中,修改limit=1,把所有的图片都打包到文件夹中。limit越小打包到文件夹中的图片越多网络请求越多包体积小,limit越大打包到文件夹中的图片越少包体积大,所以大家可以根据具体情况配置limit的大小。
(6)实现业务代码和第三方库分离的插件
var webpack = require('webpack');//声明webpack
//和前面博客(WebPack安装-使用-Loader-配置-插件-环境-排错详解)中
//说的多输入多输出类似,将业务代码和第三方库分离
//业务代码
bundle:__dirname+'/app/entry.js',
//第三方库
//根据自己的需求修改
//比如//vendor: ["react","react-dom","react-router","@fdaciuk/ajax"]
vendor: ["react","react-dom"]
path:__dirname+'/build',
filename:'[name].[chunkhash:24].js'
//将第三方库打包到vendor.chunkhash.js
//这里的name是配置文件里面入口文件entry的键名
//关于name不同的解释参考/liuyt/p/5810042.html
new monsChunkPlugin({ name: 'vendor' }),
hash和chunkhash的区别资料:
filename和chunkFilename的资料:
说明:请看步骤(6)插件说明更多优化资料:
(7)实现多个JS库删除交叉依赖的插件
var webpack = require('webpack');//声明webpack
new webpack.optimize.DedupePlugin()
说明:有些JS库有自己的依赖树，并且这些库可能有交叉的依赖，DedupePlugin可以找出他们并删除重复的依赖,减少包的体积。
(8)实现自动生成html的插件
安装html-webpack-plugin命令:
npm install html-webpack-plugin --save-dev
申明html-webpack-plugin插件:
var HtmlWebpackPlugin = require('html-webpack-plugin');
new HtmlWebpackPlugin({
title: 'WebPack插件研究',//设置title的名字
filename: 'index.html',//设置这个html的文件名
template: './common.html', // Load a custom template
inject: 'body', // Inject all scripts into the body
hash:true,//是否hash化 true|false
cache:true//是否缓存
如果配置模板template的话,可以直接使用以下方式配置
new HtmlWebpackPlugin({
filename: 'index.html',//设置这个html的文件名
template: './common.html', // Load a custom template
inject: 'body', // Inject all scripts into the body
})//默认带缓存,hash值可以到output的时候配置
说明:如果使用了模板,这里的title是没有效果的,可以在模板中定义title。模板随便放到哪个位置,和entry类似的方式配置路径。更多的配置参考资料:
WebPack常用插件资料:
WebPack开发和部署技巧资料:
WebPack实例与前端性能优化资料:
Webpack资料:
大公司里怎样开发和部署前端代码
优化webpack打包体积过大:
WebPack安装-使用-Loader-配置-插件-环境-排错详解（下扩展）详细介绍WebPack的插件、命令和package的配置，涉及到Webpack打包性能优化和使用技巧，适合比较了解WebPack的同学学习。WebPack差不多就介绍到这里，后面还有很多东西需要去优化和了解，WebPack深入的配置和好用的插件还是很多的。标签：至少1个，最多5个
Webpack 终于发布了 2.2 版本了，也更新了最新的文档。
先过一下 V2 版本新增的一些特性。
Tree Shaking，可以忽略未使用过的 export方法（这个 V1 的时候就已经通过三方插件实现了，如 babel-plugin-import）
ES6 modules，支持原生的 ES6 的模块加载器（和 babel-preset-es2015 一起使用时注意关闭其 modules 配置）
支持 ES6 作代码拆分，并返回 Promise 对象
支持异步 js 请求
npm install webpack
目前安装默认会使用 2.2+版本了。
这边仅列举项目中常见配置的一些变更，更具体的信息请翻阅官方文档。
resolve.root, resolve.fallback, resolve.modulesDirectories 配置项被 resolve.modules所替代。
resolve: {
root: path.join(__dirname, "src")
modules: [
path.join(__dirname, "src"),
"node_modules"
resolve.extensions 配置项不再需要传一个空字符串了。
3、 module.loaders 改成了 module.rules，虽然 module.loaders 语法依旧保留，但是不建议使用。
loaders: [
test: /\.css$/,
loaders: [
loader: "style-loader"
loader: "css-loader",
options: {
modules: true
test: /\.jsx$/,
loader: "babel-loader", // Do not use "use" here
options: {
4、 loaders 中由原先! 拼接字符串的写法改为 loader.use 数组。5、 所有 loader 模块必须带上 -loader 后缀，不能省略。6、 loader 的参数配置只能写在 rule.options 内部不能写在外面。7、 ExtractTextWebpackPlugin 改变ExtractTextPlugin 1.0.0 不能在 webpack v2 下工作。 你需要明确地安装 ExtractTextPlugin v2。
npm install --save-dev extract-text-webpack-plugin@beta
这一插件的配置变化主要体现在语法上。
ExtractTextPlugin.extract
test: /.css$/,
loader: ExtractTextPlugin.extract("style-loader", "css-loader", { publicPath: "/dist" })
loader: ExtractTextPlugin.extract({
fallbackLoader: "style-loader",
loader: "css-loader",
publicPath: "/dist"
new ExtractTextPlugin({options})
plugins: [
new ExtractTextPlugin("bundle.css", { allChunks: true, disable: false })
new ExtractTextPlugin({
filename: "bundle.css",
disable: false,
allChunks: true
其它检查项
loader 默认的 resolve 配置是相对于 context 的，可以不用再使用类似 path.resolve() 的方法来指定目录了
取消了 module.preLoaders 以及 module.postLoaders
更改 UglifyJsPlugin 的 sourceMap 的默认配置为 false
更改 UglifyJsPlugin 的 compress.warnings
的默认配置为 false
UglifyJsPlugin 不再压缩 loaders，需要通过设置 minimize:true。后续版本会逐渐移除
plugins: [
new webpack.LoaderOptionsPlugin({
minimize: true
代码中变更
ES2015 的代码分割使用
import() 替代 require.ensure 作为方法来懒加载 chunks 到你的应用中，并返回一个 Promise 对象。这意味着，如果模块加载失败的话，也可以做容错处理。
目前由于这个建议还在 Stage 3，如果你想要同时使用 import 和 Babel，你需要安装/添加 dynamic-import 语法插件来绕过解析错误。
支持字符串模板和 Promise。
体验下来，版本升级，整体配置文件的改动成本还算小的。如果碰到第三方 loader 对 V2 版本支持不友好的话就要费点脑筋了。可能由于我试验项目中文件内容不多，对于编译速度和打包后的文件大小差别不太明显。
1 收藏&&|&&2
你可能感兴趣的文章
4 收藏，258
3 收藏，423
分享到微博？
技术专栏，帮你记录编程中的点滴，提升你对技术的理解收藏感兴趣的文章，丰富自己的知识库
明天提醒我
我要该，理由是：
扫扫下载 App