webpack Loader 相关配置

1、package.json 文件配置

{
  "browserslist": [
    "> 1%",
    "last 2 versions",
    "not ie <= 8"
  ]
}

2、postcss.config.js 文件配置

// 需要本地安装 autoprefixer 依赖
module.exports = {
  plugins:{
   "autoprefixer": {}
  }
}

3、.babelrc 文件配置

// .babelrc 文件的执行顺序是从下到上
{
  "presets": [
    ["@babel/preset-env", {
      /**
       * 按需引用，没被引用的第三方模块代码不会被打包
       * 使用 "useBuiltIns": "usage" 时，会自动引入 @babel/polyfill
       * 入口文件(main.js)中无需再次引入 @babel/polyfill 文件
       */
      "useBuiltIns": "usage",
      // 执行一个 corejs 的值，需要安装 core-js@2 也可以选择使用 3 的
      "corejs": 2
    }]
  ]
}

4、识别 css 文件

{
  test: /\.css$/,
  use: [
    /**
     * style-loader 将处理完的 css 代码
     * 放在 style 标签上挂载到 body 标签中
     */
    {
      loader: 'style-loader'
    },
    {
      loader: 'css-loader',
    },
    /**
     * postcss-loader
     * 用于添加 css3 的浏览器前缀
     * 需要在根目录下创建一个 postcss.config.js 的配置文件来支持
     * postcss-loader 被使用的就会去执行 postcss.config.js 配置文件
     * package.json 文件需要添加 browserslist 配置项
     */
    {
      loader: 'postcss-loader'
    }
  ]
}

5、识别 scss 文件,node-sass 的版本不能采用最新的，本次采用 4.14.1 的

{
  test: /\.scss$/,
  use: [
    /**
     * style-loader 将处理完的 css 代码
     * 放在 style 标签上挂载到 body 标签中
     * loader 的执行顺序是从下到上的
     */
    {
      loader: 'style-loader'
    },
    {
      loader: 'css-loader',
      options: {
        /**
         * 表示每次引入 scss 文件时都要先通过以下两个 loader 处理
         * 避免嵌套引入 scss 文件时造成的错误
         */
        importLoaders: 2,
        modules: true // 开启模块化，防止不同模块的样式冲突
      }
    },
    /**
     * postcss-loader
     * 用于添加 css3 的浏览器前缀
     * 需要在根目录下创建一个 postcss.config.js 的配置文件来支持
     * postcss-loader 被使用的就会去执行 postcss.config.js 配置文件
     * package.json 文件需要添加 browserslist 配置项
     */
    'postcss-loader',
    'sass-loader'
  ]
}

6、识别 less 文件

{
  test: /\.less$/,
  use: [
    /**
     * style-loader 将处理完的 css 代码
     * 放在 style 标签上挂载到 body 标签中
     * loader 的执行顺序是从下到上的
     */
    'style-loader',
    {
      loader: 'css-loader',
      options: {
        /**
         * 表示每次引入 scss 文件时都要先通过以下两个 loader 处理
         * 避免嵌套引入 scss 文件时造成的错误
         */
        importLoaders: 2,
        // modules: true // 开启模块化，防止不同模块的样式冲突
      }
    },
    /**
     * postcss-loader
     * 用于添加 css3 的浏览器前缀
     * 需要在根目录下创建一个 postcss.config.js 的配置文件来支持
     * postcss-loader 被使用的就会去执行 postcss.config.js 配置文件
     * package.json 文件需要添加 browserslist 配置项
     */
    'postcss-loader',
    'less-loader'
  ]
}

7、识别字体图标文件

{
  test: /\.(eot|ttf|svg|woff)$/,
  use: {
    loader: 'file-loader',
    options: {
      outputPath: 'font/'
    }
  }
}

8、识别图片等文件

/**
 * url-loader 与 file-loader 相比，
 * 还可以将图片文件打包成 base64 的形式引用，
 * 减少了加载 js 文件时的 http 请求个数，
 * 但不建议将大文件图片也打包成 base64 形式，
 * 因为这样会造成请求的 js 文件过大，首次加载白屏时间过长，
 * 最佳实现即做一个限制值来判断究竟该打包成什么格式
 */
{
  test: /\.(jpg|jpeg|png|gif|txt)$/,
  use: {
    loader: 'url-loader', // 用于处理各种webpack不识别的文件
    options: {
      name: '[name]-[hash].[ext]', // 配置打包后的名称
      outputPath: 'images/', // 配置打包后的具体位置,
      limit: 2048 // 2kb，配置小于 limit 大小的图片文件将以 base64 的形式打包
    }
  }
}

9、统一识别 css/less/sass 文件

{
  test: /\.(c|le|sc)ss$/,
  use: [
    'style-loader',
    'css-loader',
    'postcss-loader',
    'sass-loader',
    'less-loader'
  ]
}

10、识别 js 文件

/**
 * 需要安装三个依赖
 * npm install --save-dev babel-loader @babel/core
 * npm install @babel/preset-env --save-dev
 * 以及配置根目录下的 .babelrc 文件，文件内容如开头所示
 * 将 js 代码转为 Es5 代码，方便各种浏览器识别
 * babel-loader 只是翻译当前的 js 代码，但像 Promise 等对象在
 * 低版本的浏览器上是没有的，所以需要 @babel/polyfill 来添加
 * @babel/polyfill 安装 npm install --save @babel/polyfill
 * 安装完后只需要在入口文件(如 main.js)引用即可 import @babel/polyfill
 */
{
  test: /\.js$/,
  exclude: /node_modules/,
  loader: "babel-loader"
}