babel

解析ES6

  • 下载包
    • npm i @babel/preset-core @babel/preset-env babel-loader -D ```javascript // webpack.config.js ‘use strict’; const path = require(‘path’);

module.exports = { entry: { index: ‘./src/index.js’, search: ‘./src/search.js’, }, output: { path: path.join(__dirname, ‘dist’), filename: ‘[name].js’, }, module: { rules: [ { test: /.js$/, use: ‘babel-loader’, } ] }, mode: ‘production’ }

  1. ```json
  2. {
  3.   "presets": [
  4.     "@babel/preset-env",
  5.   ]
  6. }

解析ReactJSX

  • 在上面的安装的基础上，继续下载包

    • npm i react react-dom @babel/preset-react -D
      1. // .babelrc
      2. {
      3. "presets": [
      4. "@babel/preset-env",
      5. "@babel/preset-react"
      6. ]
      7. }

      解析样式

      解析css——style-loader、css-loader

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

  • style-loader 将样式通过<style>标签插入head中
  • 下载包
    • npm i style-loader css-loader -D ```javascript // webpack.config.js ‘use strict’; const path = require(‘path’);

module.exports = { entry: { index: ‘./src/index.js’, search: ‘./src/search.js’, }, output: { path: path.join(__dirname, ‘dist’), filename: ‘[name].js’, }, module: { rules: [ { test: /.js$/, use: ‘babel-loader’, }, { test: /.css$/, use: [‘style-loader’, ‘css-loader’] }, ] }, mode: ‘production’ }

  1. <a name="DJBBw"></a>
  2. ## 解析less和sass
  4. - 解析less
  5.    - 下载包：`npm i less less-loader -D`
  6.    - 作用将：less转为css
  7. ```javascript
  8. 'use strict';
  9. const path = require('path');
  11. module.exports = {
  12.   entry: {
  13.     index: './src/index.js',
  14.     search: './src/search.js',
  15.   },
  16.   output: {
  17.     path: path.join(__dirname, 'dist'),
  18.     filename: '[name].js',
  19.   },
  20.   module: {
  21.     rules: [
  22.       {
  23.         test: /\.js$/,
  24.         use: 'babel-loader',
  25.       },
  26.       {
  27.         test: /\.css$/,
  28.         use: ['style-loader', 'css-loader']
  29.       },
  30.       {
  31.         test: /\.less$/,
  32.         use: ['style-loader', 'css-loader', 'less-loader'],
  33.       }
  34.     ]
  35.   },
  36.   mode: 'production'
  37. }
  • 解析sass
    • 下载包：npm i sass sass-loader -D
    • webpack.config.js配置同理


file-loader

  • 作用：用于处理文件
  • 下载包：npm i file-loader -D

    解析图片

    ```javascript // webpack.config.js ‘use strict’; const path = require(‘path’);

module.exports = { entry: { index: ‘./src/index.js’, search: ‘./src/search.js’, }, output: { path: path.join(__dirname, ‘dist’), filename: ‘[name].js’, }, module: { rules: [ { test: /.js$/, use: ‘babel-loader’, }, { test: /.css$/, use: [‘style-loader’, ‘css-loader’] }, { test: /.less$/, use: [‘style-loader’, ‘css-loader’, ‘less-loader’], }, { test: /.(scss|sass)$/, use: [‘style-loader’, ‘css-loader’, ‘sass-loader’], }, { test: /.(png|jpg|gif|jpeg|svg)$/, use: [‘file-loader’] }, ] }, mode: ‘production’ }

  1. <a name="PwsCq"></a>
  2. ## 解析字体
  3. ```javascript
  4. // webpack.config.js
  5. 'use strict';
  6. const path = require('path');
  8. module.exports = {
  9.   entry: {
  10.     index: './src/index.js',
  11.     search: './src/search.js',
  12.   },
  13.   output: {
  14.     path: path.join(__dirname, 'dist'),
  15.     filename: '[name].js',
  16.   },
  17.   module: {
  18.     rules: [
  19.       {
  20.         test: /\.js$/,
  21.         use: 'babel-loader',
  22.       },
  23.       {
  24.         test: /\.css$/,
  25.         use: ['style-loader', 'css-loader']
  26.       },
  27.       {
  28.         test: /\.less$/,
  29.         use: ['style-loader', 'css-loader', 'less-loader'],
  30.       },
  31.       {
  32.         test: /\.(scss|sass)$/,
  33.         use: ['style-loader', 'css-loader', 'sass-loader'],
  34.       },
  35.       {
  36.         test: /\.(png|jpg|gif|jpeg|svg)$/,
  37.         use: ['file-loader']
  38.       },
  39.       {
  40.         test: /\.(woff|woff2|eot|ttf|otf)$/,
  41.         use: ['file-loader']
  42.       }
  43.     ]
  44.   },
  45.   mode: 'production'
  46. }

url-loader处理图片、字体

  • 可设置较小资源自动转成base64
  • 据说其内部也用了file-loader，但其实删掉file-loader一样能打包 ```javascript ‘use strict’; const path = require(‘path’);

module.exports = { entry: { index: ‘./src/index.js’, search: ‘./src/search.js’, }, output: { path: path.join(__dirname, ‘dist’), filename: ‘[name].js’, }, module: { rules: [ { test: /.js$/, use: ‘babel-loader’, }, { test: /.css$/, use: [‘style-loader’, ‘css-loader’] }, { test: /.less$/, use: [‘style-loader’, ‘css-loader’, ‘less-loader’], }, { test: /.(scss|sass)$/, use: [‘style-loader’, ‘css-loader’, ‘sass-loader’], }, { test: /.(png|jpg|gif|jpeg|svg)$/, use: [ { loader: ‘url-loader’, options: { limit: 30000 } } ] }, { test: /.(woff|woff2|eot|ttf|otf)$/, use: [ { loader: ‘url-loader’, options: { limit: 70000 } } ] } ] }, mode: ‘production’ } ```