maxpsc / maxpsc.github.io Goto Github PK
View Code? Open in Web Editor NEWmaxpsc.github.io
maxpsc.github.io
loader
, plugin
)plugin
可通过webpack-bundle-analyzer
查看输出文件的大小、包含关系等属性,以此为依据分析打包策略。
uglifyJs
本身比较耗时external
, 将复用次数较多且体积庞大的第三方库提取出来,在index.html统一以script引入;dll
文件理念(Dynamic Link Library, 动态链接库文件),事先将其抽离并整合成一个dll文件,若依赖不变,则只需打包一次dll文件,以后只引入即可,可理解为将多个external整合为一个。module.exports = {
// ...
// webpack-dll相关配置, 区分开发和生产环境
// 当entry为一个对象时,每一个key为一个dll
// 例如:{entry: { 'vendor1': ['xxx', 'xxx1'], 'vendor2': ['xxx2', 'xxx3'] }}
dll: {
dev: {
enable: true,
entry: [
'highcharts',
'd3',
'openlayers',
'lodash',
'vue',
'vue-router',
'vuex'
],
outPath: resolve('static/dll')
},
prod: {
enable: true,
entry: [
'highcharts',
'd3',
'openlayers',
'lodash',
'vue',
'vue-router',
'vuex'
],
outPath: resolve('dist/static/dll')
}
}
// ...
};
HappyPack makes webpack builds faster by allowing you to transform multiple files in parallel.
调用方法:
var HappyPack = require('happypack');
var happyThreadPool = HappyPack.ThreadPool({ size: 4 }); //分配的线程数
module.exports = {
// ...
plugins: [
// ...
new HappyPack({
id: 'vue',
threadPool: happyThreadPool,
loaders: [ 'vue-loader' ]
}),
new HappyPack({
id: 'js',
threadPool: happyThreadPool,
loaders: [ 'babel-loader' ]
})
]
};
This plugin runs uglify in parallel with one thread for each of your available cpus.
This can lead to significantly reduced build times as minification is very CPU intensive.
调用方法:
var UglifyJsParallelPlugin = require('webpack-uglify-parallel');
module.exports = {
// ...
plugins: [
// ...
new UglifyJsParallelPlugin({
workers: os.cpus().length,
compress: {
warnings: false
},
sourceMap: true
})
]
};
webpack通过loader
对文件进行预处理,是其打包静态资源的核心功能。
在webpack配置文件中声明如下:
// @qnpm/ssa-scripts/bin/webpack.base.conf.js
// ...
var webpackConf = {
// ...
module: {
rules: [
{
test: /\.vue$/,
loader: 'vue-loader',
options: vueLoaderConfig
},
{
test: /\.js$/,
loader: 'babel-loader',
include: [ utils.resolve('src'), utils.resolve('test') ]
},
{
test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
loader: 'url-loader',
options: {
limit: 10000,
name: utils.assetsPath('img/[name].[hash:7].[ext]')
}
},
},
// ...
常用loader:
babel-loader
下一代Javscript编译器在webpack上的实现,将ES3(5)编译为ES2015+
style-loader, css-loader, sass-loader
css-loader解释css(scss, less)文件中@import
等语句,引入对应文件,此过程还可使用sass-loader或less-loader编译为css
style-loader作用是将上述导出的内容以style形式添加到DOM中
由于webpack loader执行顺序从右至左,所以一般配置会将style-loader放在css-loader左边
file-loader, url-loader
file-loader功能单一,将文件传输到指定文件夹并返回相对URL;
url-loader在file-loader的基础上还能对文件大小做限制,小于limit时,返回base64编码的DataURL
vue-loader
解析.vue文件,提取每个语言块,通过其它对应loader处理。
插件一般为webpack打包提供辅助功能,ssa-script
用到以下几个:
注:驼峰命名表示webpack内置插件, 连接符命名表示第三方插件,后有*说明根据配置是可选插件
开发环境
HotModuleReplacementPlugin
配合使用简单的webpack-dev-server
或利用webpack-hot-middleware
配置webpack实例实现模块热替换HMR
NoEmitOnErrorsPlugin
编译时出现错误,用此插件跳过输出阶段,确保输出资源不会包含错误
friendly-errors-webpack-plugin
编译中出现错误,格式化错误信息并展示
生产环境
webpack-uglify-parallel
多线程压缩、混淆输出文件
extract-text-webpack-plugin
将所有从入口引入的css文件从JS bundle分离并提取到一个独立的css文件
optimize-css-assets-webpack-plugin
优化、压缩css内容,并解决extract-text-webpack-plugin导致的代码重复的问题
optmize.CommonsChunkPlugin
将不同文件引用的相同资源拆出来,作为公共模块在最开始的时候加载一次
copy-webpack-plugin
在webpack运行周期内进行的拷贝文件操作
compression-webpack-plugin *
gzip编码静态资源,不过一般在服务端进行编码,使用较少
webpack-bundle-analyzer *
打包后根据stats.json
以可视化方式展示输出文件的大小、包含关系等属性
共同插件
DefinePlugin
创建在编译时可配置的全局变量,只要勇于区分开发和生产环境
html-webpack-plugin
自定义生成HTML文件,其中可引入打包中的相关变量和资源
html-webpack-include-assets-plugin
html-webpack-plugin的功能增强版,可在assets中进行编程控制
DllReferencePlugin *
第三方依赖预编译,用于打包优化
stylelint-webpack-plugin *
类似eslint, 对样式文件进行语法校验,支持.less和.scss
推荐文章:webpack之plugin内部运行机制
apply
属性的函数对象,apply
属性会被webpack compiler调用;插件开发中一定要理解两个核心概念compiler
和compilation
,此处简单概括下:
compiler
对象代表配置完备的webpack环境,是针对webpack的compilation
对象针对的是随时可变的项目文件,只要文件有改动,compilation就会被重新创建。show me your code:
// 首先定义一个函数作为插件实例,配置项options在这里处理
function MyWebpackPlugin(options) {
// 接收options
}
MyWebpackPlugin.prototype.apply = function(compiler, callback) {
// 对应编译周期内各个事件的钩子
compiler.plugin('emit', function(compilation, callback) {
// 创建一个头部字符串:
var filelist = 'In this build:\n\n';
// 检查所有编译好的资源文件:
// 为每个文件名新增一行
for (var filename in compilation.assets) {
filelist += ('- '+ filename +'\n');
}
// 把它作为一个新的文件资源插入到 webpack 构建中:
compilation.assets['filelist.md'] = {
source: function() {
return filelist;
},
size: function() {
return filelist.length;
}
};
callback();
});
}
module.exports = MyWebpackPlugin;
在webpack.config.js
中引用插件:
var MyPlugin = require('MyWebpackPlugin');
module.exports = {
// ...
plugins: [
new MyPlugin({
options: true
})
]
};
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.