webpack的基本配置（css、图片、字体、xml）

最新推荐文章于 2023-09-18 17:52:47 发布

我借声色予朝阳

最新推荐文章于 2023-09-18 17:52:47 发布

阅读量364

点赞数

分类专栏：前端工具文章标签： webpack

本文链接：https://blog.csdn.net/weixin_45256858/article/details/107467382

版权

前端工具专栏收录该内容

8 篇文章 2 订阅

订阅专栏

webpack.config.js

  const path = require('path');

  module.exports = {
    entry: './src/index.js',
    output: {
      filename: 'bundle.js',
      path: path.resolve(__dirname, 'dist')   
    },
    //webpack-dev-server
    devServer: {
    contentBase: './dist'
  },
    module: {
      rules: [
        //css部分
        {
          test: /\.css$/,
          use: [
            'style-loader',
            'css-loader'
          ]
        },
        
        //图片部分
      {
        test: /\.(png|svg|jpg|gif)$/,
        use: [
          'file-loader'
        ]
      },
      
      //字体部分
       {
    test: /\.(woff|woff2|eot|ttf|otf)$/,
    use: [
      'file-loader'
        ]
      }, 
      
      //xml部分
        {
       test: /\.(csv|tsv)$/,
       use: [
         'csv-loader'
       ]
     },
     {
       test: /\.xml$/,
       use: [
         'xml-loader'
       ]
     }
      ]
    }
  };

package.json

{
  "name": "webpack-study",
  "version": "1.0.0",
  "description": "",
  "private": true,
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "start": "webpack-dev-server --open",
    "build": "webpack"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "css-loader": "^3.6.0",
    "csv-loader": "^3.0.3",
    "file-loader": "^6.0.0",
    "style-loader": "^1.2.1",
    "webpack": "^4.43.0",
    "webpack-cli": "^3.3.12",
    "xml-loader": "^1.2.1"
  },
  "dependencies": {
    "lodash": "^4.17.19"
  }
}