此次我们主要研讨的是webpack框架的相干学问,webpack是一个打包构建的前端框架,用于处置惩罚前端开辟的模块化题目。
运用场景和纵向比较
说到webpack,肯定你还会想到gulp和grunt这些框架,那末webpack是做什么的呢?他和其他的框架有什么区别呢?我们一同来剖析一下。
在这一段落中我们主要对webpack和gulp举行纵向的比较剖析:
webpack的根本使命是举行打包,把在一个文件中援用的别的一个文件,都打包在一同。
gulp根本使命是完成自动化,实在我们本身能够写一段node剧本完成一切js文件的紧缩。gulp就是封装好剧原本帮我们做这些事
另有:
webpack实在也能够完成js文件的紧缩,然则这只不过是在完成打包使命的大背景下,所完成的分外使命
那末运用场景呢?我在什么情况下该用webpack
,我在什么情况下该用gulp
,笔者以为,这就仁者见仁智者见智了,如果说,你就是在开辟工程中为了打包,为了模块化,那末你肯定要用webpack
啊,另有你愿望完成剖析sass
直接放入html
中,那末这能够用webpack完成,在打包的历程当中就随手完成了。然则,你首次以外,还想完成,在上线构建的时刻,把图片上传cdn而且替代链接,那末你就须要分外引入gulp
。webpack
和gulp
都有本身的优点和弊端,剖析好这两个框架,你就能够在运用历程当中瓮中之鳖。
基础设置项
基础设置项。我们起首说说怎样定义基础设置项,第一是我们能够shell
的体式格局,定义设置,都写在敕令行上,然则这类体式格局不好,设置项一多,实行的敕令就迥殊长。因而我们平常采纳的都是设置文件的体式格局。
const path = require('path');
module.exports = {
// entry 示意 进口,Webpack 实行构建的第一步将从 Entry 最先,可笼统成输入。
// 范例能够是 string | object | array
entry: './app/entry', // 只要1个进口,进口只要1个文件
entry: ['./app/entry1', './app/entry2'], // 只要1个进口,进口有2个文件
entry: { // 有2个进口
a: './app/entry-a',
b: ['./app/entry-b1', './app/entry-b2']
},
// 怎样输出效果:在 Webpack 经由一系列处置惩罚后,怎样输出终究想要的代码。
output: {
// 输出文件寄存的目次,必需是 string 范例的绝对途径。
path: path.resolve(__dirname, 'dist'),
// 输出文件的称号
filename: 'bundle.js', // 完全的称号
filename: '[name].js', // 当设置了多个 entry 时,经由过程称号模版为差别的 entry 天生差别的文件称号
filename: '[chunkhash].js', // 依据文件内容 hash 值天生文件称号,用于浏览器长时间缓存文件
// 宣布到线上的一切资本的 URL 前缀,string 范例
publicPath: '/assets/', // 放到指定目次下
publicPath: '', // 放到根目次下
publicPath: 'https://cdn.example.com/', // 放到 CDN 上去
// 导出库的称号,string 范例
// 不填它时,默许输出花样是匿名的马上实行函数
library: 'MyLibrary',
// 导出库的范例,罗列范例,默许是 var
// 能够是 umd | umd2 | commonjs2 | commonjs | amd | this | var | assign | window | global | jsonp ,
libraryTarget: 'umd',
// 是不是包括有效的文件途径信息到天生的代码里去,boolean 范例
pathinfo: true,
// 附加 Chunk 的文件称号
chunkFilename: '[id].js',
chunkFilename: '[chunkhash].js',
// JSONP 异步加载资本时的回调函数称号,须要和效劳端搭配运用
jsonpFunction: 'myWebpackJsonp',
// 天生的 Source Map 文件称号
sourceMapFilename: '[file].map',
// 浏览器开辟者东西里显现的源码模块称号
devtoolModuleFilenameTemplate: 'webpack:///[resource-path]',
// 异步加载跨域的资本时运用的体式格局
crossOriginLoading: 'use-credentials',
crossOriginLoading: 'anonymous',
crossOriginLoading: false,
},
// 设置模块相干
module: {
rules: [ // 设置 Loader
{
test: /\.jsx?$/, // 正则婚配掷中要运用 Loader 的文件
include: [ // 只会掷中这里面的文件
path.resolve(__dirname, 'app')
],
exclude: [ // 疏忽这里面的文件
path.resolve(__dirname, 'app/demo-files')
],
use: [ // 运用那些 Loader,有前后序次,从后往前实行
'style-loader', // 直接运用 Loader 的称号
{
loader: 'css-loader',
options: { // 给 html-loader 传一些参数
}
}
]
},
],
noParse: [ // 不必剖析和处置惩罚的模块
/special-library\.js$/ // 用正则婚配
],
},
// 设置插件
plugins: [
],
// 设置寻觅模块的划定规矩
resolve: {
modules: [ // 寻觅模块的根目次,array 范例,默许以 node_modules 为根目次
'node_modules',
path.resolve(__dirname, 'app')
],
extensions: ['.js', '.json', '.jsx', '.css'], // 模块的后缀名
alias: { // 模块别号设置,用于映照模块
// 把 'module' 映照 'new-module',一样的 'module/path/file' 也会被映照成 'new-module/path/file'
'module': 'new-module',
// 运用末端标记 $ 后,把 'only-module' 映照成 'new-module',
// 然则不像上面的,'module/path/file' 不会被映照成 'new-module/path/file'
'only-module$': 'new-module',
},
alias: [ // alias 还支撑运用数组来更细致的设置
{
name: 'module', // 老的模块
alias: 'new-module', // 新的模块
// 是不是是只映照模块,如果是 true 只要 'module' 会被映照,如果是 false 'module/inner/path' 也会被映照
onlyModule: true,
}
],
symlinks: true, // 是不是追随文件软链接去征采模块的途径
descriptionFiles: ['package.json'], // 模块的形貌文件
mainFields: ['main'], // 模块的形貌文件里的形貌进口的文件的字段称号
enforceExtension: false, // 是不是强迫导入语句必须要写明文件后缀
},
// 输出文件机能搜检设置
performance: {
hints: 'warning', // 有机能题目时输出正告
hints: 'error', // 有机能题目时输出毛病
hints: false, // 封闭机能搜检
maxAssetSize: 200000, // 最大文件大小 (单元 bytes)
maxEntrypointSize: 400000, // 最大进口文件大小 (单元 bytes)
assetFilter: function(assetFilename) { // 过滤要搜检的文件
return assetFilename.endsWith('.css') || assetFilename.endsWith('.js');
}
},
devtool: 'source-map', // 设置 source-map 范例
context: __dirname, // Webpack 运用的根目次,string 范例必需是绝对途径
// 设置输出代码的运转环境
target: 'web', // 浏览器,默许
target: 'webworker', // WebWorker
target: 'node', // Node.js,运用 `require` 语句加载 Chunk 代码
target: 'async-node', // Node.js,异步加载 Chunk 代码
target: 'node-webkit', // nw.js
target: 'electron-main', // electron, 主线程
target: 'electron-renderer', // electron, 衬着线程
externals: { // 运用来自 JavaScript 运转环境供应的全局变量
jquery: 'jQuery'
},
stats: { // 掌握台输出日记掌握
assets: true,
colors: true,
errors: true,
errorDetails: true,
hash: true,
},
devServer: { // DevServer 相干的设置
proxy: { // 代理到后端效劳接口
'/api': 'http://localhost:3000'
},
contentBase: path.join(__dirname, 'public'), // 设置 DevServer HTTP 效劳器的文件根目次
compress: true, // 是不是开启 gzip 紧缩
historyApiFallback: true, // 是不是开辟 HTML5 History API 网页
hot: true, // 是不是开启模块热替代功用
https: false, // 是不是开启 HTTPS 形式
},
profile: true, // 是不是捕获 Webpack 构建的机能信息,用于剖析什么缘由致使构建机能不佳
cache: false, // 是不是启用缓存提拔构建速率
watch: true, // 是不是最先
watchOptions: { // 监听形式选项
// 不监听的文件或文件夹,支撑正则婚配。默以为空
ignored: /node_modules/,
// 监听到变化发作后会等300ms再去实行行动,防备文件更新太快致使从新编译频次太高
// 默以为300ms
aggregateTimeout: 300,
// 推断文件是不是发作变化是不断的去讯问体系指定文件有无变化,默许每秒问 1000 次
poll: 1000
},
}
以上我们就是webpack中大部份的设置项,实在我们能够发明,最主要四个是entry
、output
、loader
和plugin
离别代表进口,出口,加载器和插件。详细的设置信息和其他的设置项就不逐一引见了。
发起人人看一下webpack的官方文档,详细相识一下每一个设置项的寄义,就算都记不下来,也最好有点印象。
道理初探
起首我们看一下webpack的团体道理:
初始化参数:从设置文件和 Shell 语句中读取与兼并参数,得出终究的参数;
最先编译:用上一步获得的参数初始化 Compiler 对象,加载一切设置的插件,实行对象的 run 要领最先实行编译;
肯定进口:依据设置中的 entry 找出一切的进口文件;
编译模块:从进口文件动身,挪用一切设置的 Loader 对模块举行翻译,再找出该模块依靠的模块,再递归本步骤直到一切进口依靠的文件都经由了本步骤的处置惩罚;
完成模块编译:在经由第4步运用 Loader 翻译完一切模块后,获得了每一个模块被翻译后的终究内容以及它们之间的依靠关联;
输出资本:依据进口和模块之间的依靠关联,组装成一个个包括多个模块的 Chunk,再把每一个 Chunk 转换成一个零丁的文件到场到输出列表,这步是能够修正输出内容的末了机遇;
输出完成:在肯定好输出内容后,依据设置肯定输出的途径和文件名,把文件内容写入到文件体系。
然后我们再看一下webpack中plugin的道理
在运用htmlWebpackPluin的历程当中,发明打包出的index.html文件,js援用了两次,因为本身相识plugin的道理,因而着手写了一个。
webpack 的插件架构主要基于Tapable完成的,这个Tapable就是专注于事宜的播送和操纵。在webpack的编译历程当中会播送许多事宜,插件能够本身去监听这些事宜,在webpack实行到响应的机遇做某些操纵,然后插件也能够播送事宜。
下面就是详细api的完成了,webpack中有complier对象,代表webpack实例。有编译的详细参数。另有一个complation代表本次编译,有打包的文件等信息。
在complier上面绑定plugin和apply。在回调函数中传入complation对象。
plugins: [
function () {
this.plugin('done', (stats) => {
stats.toJson(true).chunks.filter(c => c.entry).forEach(c => {
let fileContent = fs.readFileSync((path.join(BUILD_PATH, 'views/main.pug'))).toString('utf-8')
fs.writeFileSync(path.join(BUILD_PATH, 'views/main.pug'), fileContent.replace(/webpack\-bundle.*src="(.*)"/g, (match, p1) => {
return match.replace(p1, PUBLIC_PATH + c.files[0])
}))
})
})
}
]
常见题目剖析
webpack设置中碰到的题目
css-loader中importLoaders=1参数的题目
题目是加载的css文件中import了一个css文件,虽然能够被引入末了的html中,然则引入的css未经由postcss的处置惩罚,因而加上了这个,就ok了
Mac平台和Windows平台的差别致使的题目
// 设置entry选项时:
entry: {
main: __dirname + '/src/index.js'
}
// /和\的题目
const path = require('path');
const entryPath = path.resolve(__dirname, '/src/index.js');
entry: {
main: entryPath
}
不能满足营业需求,自定义plugin的经由
如上
进步webpack构建速率的题目
减少查找文件的局限
应用loader中的exclude
和include
。
应用reslove中的moudules
,这个能够在require时指明寄存第三方模块的途径。
应用动态链接库
应用插件DllPlugin,能够打包出一个个零丁的动态链接库文件。缘由在于包括大批复用模块的动态链接库只须要编译一次,在以后的构建历程当中被动态链接库包括的模块将不会在从新编译,而是直接运用动态链接库中的代码。
开启打包编译多历程
运转在Node.js之上的webpack是单线程模子的,也就是说webpack须要处置惩罚的使命须要一件件挨着做,不能多个事变一同做。应用插件HappyPack,webpack中最耗时的就是loader这一步,HappyPack它把使命剖析给多个子历程去并发的实行,子历程处置惩罚完后再把效果发送给主历程。
提取大众代码
应用CommonsChunkPlugin插件提取大众代码。
用过什么plugin
htmlWebpackPlugin用来自意向html文件中到场js和css的文件引入。
CommonsChunkPlugin能够打包大众部份代码(据说4.0已不必了)。
HappyPack开启多历程,加速打包速率。