Open FrankKai opened 5 years ago
webpack --profile 这个命令可以输出编译每一阶段的时间损耗。
webpack --progress 百分比式打印编译进度。
webpack解析里的扩展配置:
resolve: {
extensions: ['.wasm', '.js', '.vue', '.json']
}
详细资料可以看这里:https://webpack.js.org/configuration/resolve/#resolveextensions
在拥有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
{
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的作用是什么?
连接数组,合并对象。
```js
// 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 ] }
默认关闭,因为开启后会增加运行时开销并增大包的大小。
那么开发环境开启与不开启的区别是什么呢?
在我的项目中,使用了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。。
如何查看完整的打包日志?
ExtractTextPlugin是抽离css的吧
ExtractTextPlugin是抽离css的吧
是的,2年前的理解有误。 已经改过来了