FrankKai.github.io
FrankKai.github.io copied to clipboard
FrankKai
Webpack那些事儿
webpack 常用命令
-
webpack --profile 这个命令可以输出编译每一阶段的时间损耗。
- factory 收集模块元数据时间。（例如，解析文件时间）
- building 构建模块时间。（例如，loader和解析）
- dependencies 识别并连接到模块依赖的时间。
-
webpack --progress 百分比式打印编译进度。
webpack 疑问汇总
- v4中的mode是什么？ webpack根据环境(development，production)开启内部的optimization，提升性能。
- resolve中的extentions是什么意思？ 引入文件无需增加后缀名。import Foo from './foo.js' -> import Foo from './foo';
webpack解析里的扩展配置:
resolve: {
extensions: ['.wasm', '.js', '.vue', '.json']
}
详细资料可以看这里：https://webpack.js.org/configuration/resolve/#resolveextensions
- loader的enforce参数 指定loader的目录，有2个值：'pre'和'post'。 pre是把loader执行顺序放最前，post把loader执行顺序放最后。
在拥有eslint-loader，vue-loader，babel-loader的情况下，一般来说会指定eslint-loader的enforce值为pre，确保首先验证.eslintrc.js中的eslint规则，通过验证再走后续的vue-loader和babel-loader。
引申问题：pitching是什么？ 细力度的控制代码的执行loader的顺序，遇到某个module的pitch方法有return，即跳过后面的loader，进入已加载的loader执行处理。https://webpack.js.org/api/loaders/#pitching-loader
- url-loader的limit和name命名规则是什么？
{
test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
loader: 'url-loader',
options: {
limit: 10000, // 小于10KB url-loader生效直接将文件转换成base64url；大于10KB通过file-loader加载到项目文件中。
name: utils.assetsPath('img/[name].[hash:7].[ext]'), /* 这是file-loader的文件名，由[path]/[name].[hash:7].[ext]组成。path是相对webpack/config context的目录。name是file.basename。[<hashType>:hash:<digestType>:<length>]
。加密类型有md5, sha1, sha256, and sha512。编码类型:base26, base32, base36, base49, base52, base58, base62, base64, and hex.length是哈希值的长度。ext是file.extname。 https://webpack.js.org/loaders/file-loader/#path */
},
},
url-loader源码明确告诉我们url-loader limit的作用原理：
if(!limit || content.length < limit) {
if(typeof content === "string") {
content = new Buffer(content);
}
return "module.exports = " + JSON.stringify("data:" + (mimetype ? mimetype + ";" : "") + "base64," + content.toString("base64"));
}
var fileLoader = require("file-loader");
return fileLoader.call(this, content);
}
- webpack-merge的作用是什么？ 连接数组，合并对象。
// foo.js
module.exports = {
a: 1,
b: [1]
}
// bar.js
module.exports = {
a: 2,
b: [2],
}
// webpack-merge-test.js
const merge = require('webpack-merge');
const foo = require('./foo');
const bar = require('./bar');
console.log(merge(foo, bar));
输出：{ a: 2, b: [ 1, 2 ] }
- cssSourceMap是什么？ 一直以为sourceMap只有js有，原来css也有。 css-loader,postcss-loader,less-loader,sass-loader,stylus-loader有一个sourceMap的配置。
默认关闭，因为开启后会增加运行时开销并增大包的大小。
那么开发环境开启与不开启的区别是什么呢？
在我的项目中，使用了iView，main.js中引入了iview.css，import 'iview/dist/styles/iview.css';。
cssSourceMap开启后，控制台中会把来自iview.css的样式也放出来，关闭后就只会放单文件组件的sm。
- contentBase关闭后CopyWebpackPlugin怎么生效的？ contentBase一般是存放静态文件的。
new CopyWebpackPlugin([
{
from: path.resolve(__dirname, '../static'),
to: config.dev.assetsSubDirectory,
ignore: ['.*'],
},
]),
复制static到static。
-
portFinder是什么？ portFinder可以在占用了配置文件中的端口后依次在新端口上开启服务，pointFinder会从basePort一直查到highestPort，直到能找到一个能开启服务的端口。 意外情况：1.意外关闭webstorm进程没关 2.进程被其他服务占用 处理建议：可以使用ps -ef | grep 服务名, kill -9 portNumber 关闭意外占用的端口。
-
ExtractTextPlugin是什么？ 将CSS从bundle文件里提取成一个独立的CSS。。
-
如何查看完整的打包日志？
