陌上人如玉
公子世无双

webpack4中的module和loader

module

今天讨论webpack4中的module,webpack中一切皆模块,一个模块对应一个文件,webpack会从配置的entry开始递归找出所有依赖的模块。
webpack4支持多种形式的模块类型,但是有时候可能需要加上type进行配合
如果是CommonJS, AMD, ESM三种类型的模块,使用javascript/auto;
如果是EcmaScript modules(.mjs),使用javascript/esm,其他的模块类型将不生效;
如果只有CommonJS和EcmaScript modules不可用,使用javascript/dynamic;
如果是json类型的文件,允许使用require和import来导入json,使用json;
如果是Webassembly,使用webassembly/experimental —— 官方说是一个实验性的功能。

rules: [
   {
        test: /\.json$/,
        type: "javascript/auto"
    }
]

loader

模块转换器,用于将模块的原内容按照需求转换成新的内容
举个栗子:
将A文件进行编译形成B文件,这里操作的是文件,比如将A.scss或A.less转变为B.css,单纯的文件转换过程;
在webpack3.x中还保留之前版本的loaders,与rules并存都可以使用,在新版中完全移除了loaders,必须使用rules。

相比于 grunt 和 gulp,webpack 最出色的功能之一就是,除了 JavaScript,还可以通过 loader 引入任何其他类型的文件。
看下配置项

const utils = require('./utils')
module.exports = {
  module: {
    rules: [
      {
        test: /\.vue$/,
        loader: 'vue-loader'
      },
      {
        test: /\.css$/,
        use: ['style-loader', 'css-loader']
      },
      {
        test: /\.less$/,
        use: ['style-loader', 'css-loader', 'less-loader']
      },
      {
        test: /\.js$/,
        loader: 'babel-loader',
        include: path.resolve(__dirname, 'src')
      },
      {
        test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
        loader: 'url-loader',
        options: {
          limit: 10000,
          name: utils.assetsPath('img/[name].[hash:7].[ext]')
        }
      },
      {
        test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/,
        loader: 'url-loader',
        options: {
          limit: 10000,
          name: utils.assetsPath('fonts/[name].[hash:7].[ext]')
        }
      },
    ]
  }
}

utils.js

const config = require('../config')
const path = require('path')
exports.assetsPath = function (_path) {
  var assetsSubDirectory = process.env.NODE_ENV === 'production'
    ? config.build.assetsSubDirectory
    : config.dev.assetsSubDirectory
  return path.posix.join(assetsSubDirectory, _path)
}

rules

配置模块的读取和解析规则,通常用来配置loader。其类型是一个数组,数组里的每一项用来描述如何处理指定的文件,基本配置如下

  • 条件匹配:通过test、include、exclude三个配置项来选中loader要应用的规则
  • 应用规则:对选中的文件通过use配置项类应用loader,可以只应用一个loader或者按照从右往左的顺序应用一组loader,同时可分别向loader传递参数
  • 重置顺序:一组loader的执行顺序默认是从右向左,通过enforce可以将其中一个loader的执行顺序放到最前或者最后
赞(0) 打赏
未经允许不得转载:陌上寒 » webpack4中的module和loader

评论 抢沙发

觉得文章有用就打赏一下文章作者

非常感谢你的打赏,我们将继续给力更多优质内容,让我们一起创建更加美好的网络世界!

微信扫一扫

支付宝扫一扫