Webpack那些事儿

[FrankKai]

• webpack 常用命令
• webpack 疑问汇总

[FrankKai]

webpack 常用命令

• webpack --profile
  这个命令可以输出编译每一阶段的时间损耗。

  • factory 收集模块元数据时间。（例如，解析文件时间）
  • building 构建模块时间。（例如，loader和解析）
  • dependencies 识别并连接到模块依赖的时间。

• webpack --progress
  百分比式打印编译进度。

[FrankKai]

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。。

• 如何查看完整的打包日志？

[yunlzhang]

ExtractTextPlugin是抽离css的吧

[FrankKai]

ExtractTextPlugin是抽离css的吧

是的，2年前的理解有误。 已经改过来了