webpack 资源解析

资源解析

解析 ES6

使用 babel-loader

在项目根目录下安装 babel

npm install -D babel-loader @babel/core @babel/preset-env webpack
# 我用 npm 没装上 尝试了很多次
# 最后直接用 yarn add 装的

babel的配置文件是: .babelrc

const path = require('path');
module.exports = {
  entry: './src/index.js',
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'dist')
  },
  module: {
    rules: [
      test: /.js$/,
      use: 'babel-loader'
    ]
  }
};

因为使用了 ES6，因此要在 .babelrc 里面新增

{
  "presets": [
    "@babel/preset-env"
  ],
  "plugins": [
    "@babel/proposal-class-properties"
  ]
}

解析 React JSX

首先安装下依赖

npm install react react-dom @babel/preset-react -D

然后把 preset-react 加入到 .babelrc文件里面

{
  "presets": [
   "@babel/preset-env",
    "@babel/preset-react"       // 新增了 react 的 jsx 解析
  ],
  "plugins": [
    "@babel/proposal-class-properties"
  ]
}

解析 CSS

css-loader 用于加载 .css 文件， 并且转换成 commonjs 对象。

npm install style-loader	css-loader -D

style-loader 将样式通过 <style>标签插入到 head 中。

const path = require('path');

module.exports = {
 entry: './src/index.js',
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'dist')
  },
  module: {
    rules: [
      {
        test: /.css$/,
        use: [
          'style-loader',
          'css-loader'
        ]
      }
    ]
  }
}；

解析 Less 和 Sass

npm i less less-loader -D

less-loader 用于将 less 转换成 css

const path = require('path');

module.exports = {
  entry: './src/index.js',
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'dist')
  },
  module: {
    rules: [
      {
        test: /.less$/,
        use: [
          'style-loader',
          'css-loader',
          'less-loader'
        ]
      }
    ]
  }
};

解析图片资源

npm i file-loader -D

file-loader 用于处理图片资源

  module: {
    rules: [
      {
        test: /.(png|jpg|gif|jpeg)$/,
        use: "file-loader",
      },
    ],
  },

解析字体资源

file-loader也可以用于处理字体

const path = require('path');

module.exports = {
  entry: './src/index.js',
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'dist')
  },
  module: {
    rules: [
			{
        test: /.(woff|woff2|eot|ttf|otf)$/,
        use: [
          'file-loader'
        ]
      }
    ]
  }
}

解析资源（图片解析和字体解析，还可以使用 url-loader）

url-lodaer 也可以处理图片和字体

npm install url-loader -D

url-loader 相比 file-loader，多了一个 base64 的转换

可以设置较小资源自动 base64

const path = require('path');

module.exports = {
  entry: './src/index.js',
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'dist')
  },
  module: {
    rules: [
      {
        test: /.(png|svg|jpg|gif)$/,
        use: [{
          loader: 'url-loader',
          options: {
            limit:10240
          }
        }]
      }
    ]
  }
};