1、npm 镜像问题

新建.npmrc

registry=https://registry.npm.taobao.org/

2、关于less-loader使用

需要安装 less 和 less-loader

less-loader 需要安装7版本匹配webpack4

目前最新less-loader到8版本

npm i less less-loader@7 -D

  module: {
    rules: [
      {
        test: /\.less$/,
        use: [
          'style-loader',
          'css-loader',
          { 
            loader: 'less-loader', // 放对象
            options: {
              sourceMap: true,
            },
          },
        ],
      },
    ],
  },

3、关于 postcss-loader

babel之于js，相当于postcss于css

插件：

提前使用css语法：

autoprefixer、postcss-preset-env

npm install --save-dev postcss-loader postcss

postcss.config.js

module.exports = {
  plugins: [
    [
      "postcss-preset-env",
      {
        // Options
      },
    ],
  ],
};

webpack.config.js

postcss-loader 正确位置放置：

      {
        test: /\.css$/i,
        use: ["style-loader", "css-loader", "postcss-loader", "less-loader"],
      },

autoprefixer、postcss-preset-env 需使用 browerlist，告诉插件目标浏览器

package.json 添加

{
  "browserslist": [
    "last 1 version",
    "> 1%",
    "maintained node versions",
    "not dead"
  ]
}

.browserslistrc

# Browsers that we support 
 
last 1 version
> 1%
maintained node versions
not dead

可以通过

npx browerslist "last 2 version, >1%"

来查看当前支持哪些浏览器

4、关于 mini-css-extract-plugin

const minicss = require('mini-css-extract-plugin')

...

  // loader 要修改， 把 "style-loader" 改为 minicss.loader


  plugins: [
    // css 独立出单独文件
    new minicss({
      filename: '[name].[hash:8].css', // 对hash可以截取[hash:6]
    }),
    new HtmlWebpackPlugin({
      template: './index.html',
      filename: 'index.html',
    }),
    new CleanWebpackPlugin(),
  ],

重点！！！！！

5、如何实现loader

如何引用自定义loader?

module.rules

      {
        test: /\.js$/,
        use: path.resolve(__dirname, './myloader/replace-loader.js'),
      },

如何写同步的loader？

同步loader：

文件名： replace-loader.js

// loader 的结构
// 本质是一个函数 不能是箭头函数
// loader 必须有返回值， string 或者 buffer
// 同步loader的写法

module.exports = function (source) {
  // console.log(source) 文件内容
  // loader api:
  // this.query 表示传进来得 options
  console.log('this.query:')  
  console.log(this.query) 
  return source.replace('webpack', 'huihui 卡子')
}

如何写异步的loader？

异步loader：

文件名： replace-loader-async.js

module.exports = function (source) {
  // console.log(source) 文件内容
  const content = this.query
  // 如何返回多个信息
  const callback = this.async()
  console.log('尝试等待3秒钟')
  setTimeout(() => {
    console.log('已等待了3秒钟')
    callback(null, source + `\n console.log('${JSON.stringify(content)}')`) // 可以同步或异步返回 比如写在settimeout
  }, 3000)

  // this.async() // 这个函数会告诉loader会有异步代码 返回的就是this.callback
}

webpack.config.js 配置多个loader连起来使用

      {
        test: /\.js$/,
        use: [
          {
            loader: path.resolve(__dirname, './myloader/replace-loader-async.js'),
            options: {
              test: '看看我输入了什么',
            },
          },
          {
            loader: path.resolve(__dirname, './myloader/replace-loader.js'),
            options: {
              test: '看看我输入了什么',
            },
          },
        ],
      },

如何配置自定义loader的路径?

module.exports = {
  mode: 'development',
  entry: './src/index.js',
  //...
  resolveLoader: {
    modules: ['node_modules', './myloader'],
  },
  //....
}

然后loader配置写法可以像第三方的写法一样?

      // 引用自定义 loader
      {
        test: /\.js$/,
        use: [
          {
            loader: 'replace-loader-async.js',
            options: {
              test: '看看我输入了什么',
            },
          },
          'replace-loader',
        ],
      },

webpack-01：前端开发环境搭建-01