webpack处理字体

作者: 小人物的秘密花园 | 来源:发表于2019-08-20 14:24 被阅读0次

    参考

    url-loader

    配置

    1.创建本地项目webpack-demo

    mkdir webpack-demo
    cd webpack-demo
    

    2.在webpack-demo的根目录下创建package.json文件

    npm init -y
    
    1. 安装webpack依赖包
    npm i webpack webpack-cli webpack-dev-server --save-dev
    

    模块说明:

    • webpack
      webpack核心

    • webpack-cli
      webpack的脚手架(启动器)

    • webpack-dev-server
      开发环境下用于实时加载依赖

    4.修改package.json文件的scripts属性值,进行打包资源的配置

    "scripts": {
        "dev": "webpack-dev-server --open --mode development",
        "build": "webpack --mode production"
      },
    

    5.安装相关的loader

    npm install  url-loader --save-dev
    

    6.在webpack.config.js中配置

    const path = require('path');
    // 显示进程的完成进度
    var ProgressBarPlugin = require('progress-bar-webpack-plugin');
    // 设置进度字体颜色
    const chalk = require('chalk');
    // 以树图的方式展示打包后的文件
    const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;
    // 输出html
    const HtmlWebpackPlugin = require('html-webpack-plugin');
    // 分离css代码
    const MiniCssExtractPlugin = require('mini-css-extract-plugin');
    // 清空dist文件夹
    const {
      CleanWebpackPlugin
    } = require('clean-webpack-plugin');
    module.exports = {
      mode: 'production',
      entry: {
        app: './src/app.js'
      },
      output: {
        path: path.resolve(__dirname, '../dist'),
        filename: '[name].[hash].min.js'
      },
      module: {
        rules: [{
            test: /\.jsx?$/,
            use: [{
              loader: 'babel-loader'
            }]
          },
          {
            test: /\.css$/,
            use: [
              // {
              //   loader: 'style-loader'
              // },
              MiniCssExtractPlugin.loader,
              {
                loader: 'css-loader'
              },
              {
                loader: 'postcss-loader'
              }
            ]
          },
          {
            test: /\.less$/,
            use: [
              // {
              //   loader: 'style-loader'
              // },
              MiniCssExtractPlugin.loader,
              {
                loader: 'css-loader'
              },
              {
                loader: 'less-loader'
              }
            ]
          },
          {
            test: /\.scss$/,
            use: [
              // {
              //   loader: 'style-loader'
              // },
              MiniCssExtractPlugin.loader,
              {
                loader: 'css-loader'
              },
              {
                loader: 'postcss-loader'
              },
              {
                loader: 'sass-loader'
              }
            ]
          },
          {
            test: /\.(jpg|png|jpe?g|gif|svg)(\?.*)?$/i,
            use: [
              {
                loader: 'url-loader',
                options: {
                  outputPath: 'images/',// 输出目录
                  name(file) {// 输出名称
                    return '[hansh].[ext]'
                  },
                  limit: 5*1024
                }
              }
            ]
          },
          {
            test: /\.(eot|woff2?|ttf|svg)$/,
            use: [{
              loader: 'url-loader',
              options: {
                name: '[name]-[hash:5].min.[ext]',
                limit: 5000,
                publicPath: '../static/fonts/',
                outputPath: 'fonts/'
              }
            }]
          }
        ]
      },
      plugins: [
        new HtmlWebpackPlugin({
          title: 'Webpack Study Demo',
          filename: 'index.html', //指定生成的HTML文件名
          template: path.join(__dirname, '../public/index.html') // 指定模板路径
        }),
        
        new MiniCssExtractPlugin({
          filename: '[name].css',// 分离后的文件名
          chunkFilename: '[id].css',//
          ignoreOrder: false
        }),
        new CleanWebpackPlugin(),
        new ProgressBarPlugin({
          format: chalk.green('Progressing') + '[:bar]' + chalk.green(':percent') + '(:elapsed seconds)',
          clear: false
        }),
        new BundleAnalyzerPlugin()
      ]
    }
    

    相关文章

      网友评论

        本文标题:webpack处理字体

        本文链接:https://www.haomeiwen.com/subject/tuwusctx.html