Webpack系列-几个常见的loader

url-loader

yarn add url-loader

使用url-loader会帮我们把图片变成base64的字符串; 优点: dist---> 少了 .jpg 图片文件 --->  减少一次图片的HTTP 请求;

页面加载: js加载完毕; 图片进入到 bundel.js中(通过base64形式); 图片过大 ---> bundle.js过大 ---> 页面加载完毕时间很长 --->  空白页面

图片只有1，2kb --->  bundle.js(base64)

图片很大---> file-loader ---> 生成单独的.jpg去发送额外的HTTP请求,js抽次加载时间就很短，页面很快就会出来

style-loader和css-loader

首先安装:

 yarn add style-loader css-loader

配置文件:

const path = require('path');

const HtmlWebpackPlugin = require('html-webpack-plugin');
const {CleanWebpackPlugin} = require('clean-webpack-plugin');

module.exports = {
  mode: 'development',
  entry: {
    main: './src/index.js'
  },
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'dist')
  },
  module: {
    rules: [
      {
        test: /.(jpg|png|gif)$/,
        use: {
          loader: 'url-loader',
          options: {
            // 占位符 placeholder
            name: '[name]_[hash].[ext]',
            outputPath: 'images/',
            limit: 2048
          }
        }
      },
      {
        test: /.css$/,
        use: [
          'style-loader',//将css-loader生成的css代码放入html的head标签里面
          'css-loader'  //帮助分析css文件之间的引用关系并生成css代码
        ]
      }
    ]
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: './src/index.html'
    }),
    new CleanWebpackPlugin()
  ]
}

sass-loader和postcss-loader

安装:

sudo npm install sass sass-loader -D
yarn add postcss
yarn add postcss-loader

yarn add autoprefixer

package.json:

"browserslist":[
"> 1%",
大于市场1%的浏览器
"last 2 versions"
与上2个版本兼容
],

postcss.config.js:

module.exports = {
  plugins: [
    require('autoprefixer')
  ]
}