# webpack-config

**Repository Path**: wx0701/webpack-config

## Basic Information

- **Project Name**: webpack-config
- **Description**: webpack配置
- **Primary Language**: JavaScript
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2020-06-07
- **Last Updated**: 2020-12-19

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# webpack-config

#### 介绍
webpack配置

### 基础配置
```js
const path = require('path')
const webpack = require('webpack')
// html打包插件
const HtmlWebpackPlugin = require('html-webpack-plugin')
// 删除目录插件
const {CleanWebpackPlugin} = require('clean-webpack-plugin')
// 拆分css插件
const MiniCssExtractPlugin = require('mini-css-extract-plugin')

module.exports = {
  entry: ['@babel/polyfill',path.resolve(__dirname,'./src/main.js')], // 入口，使用了@babel/polyfill来打包js
  output: { //出口
    path: path.resolve(__dirname, 'dist'),  // 出口路径
    filename: '[name][hash:8].bulid.js'     // 出口文件名
  },
  plugins: [
    new webpack.HotModuleReplacementPlugin(), //热更新
    new CleanWebpackPlugin(), //删除目录
    new HtmlWebpackPlugin({ // html模板
      title: '小米商城',
      filename: 'index.html',
      template: './index.html'
    }),
    new MiniCssExtractPlugin({  // css拆分
      filename: '[name].[hash].css',
      chunkFilename: '[id].css'
    })
  ],
  mode: 'development',  // 模式
  devServer: {  // 本地服务器
    contentBase: path.join(__dirname, 'dist'),
    port: '3344',
    open: true,
    hot: true
  },
  module: {
    rules: [
      {
        test: /\.js$/,
        use: {
          loader: 'babel-loader',
          options: {
            presets: ['@babel/preset-env']
          }
        },
        exclude: /node_modules/
      },{
        test: /\.css$/,
        use: ['style-loader','css-loader',{
          loader: 'postcss-loader',
          options: {
            plugins: [require('autoprefixer')]
          }
        }]
      },{
        test: /\.less$/,
        use: ['style-loader',
          MiniCssExtractPlugin.loader,
          'css-loader','less-loader',{
          loader: 'postcss-loader',
          options: {
            plugins: [require('autoprefixer')]
          }
        }]
      },{
        test: /\.(jpe?g|png|gif)$/i, //图片文件
        use: [
          {
            loader: 'url-loader',
            options: {
              limit: 10240,
              fallback: {
                loader: 'file-loader',
                options: {
                    name: 'img/[name].[hash:8].[ext]'
                }
              }
            }
          }
        ]
      },{
        test: /\.(mp4|webm|ogg|mp3|wav|flac|aac)(\?.*)?$/, //媒体文件
        use: [
          {
            loader: 'url-loader',
            options: {
              limit: 10240,
              fallback: {
                loader: 'file-loader',
                options: {
                  name: 'media/[name].[hash:8].[ext]'
                }
              }
            }
          }
        ]
      },{
        test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/i, // 字体
        use: [
          {
            loader: 'url-loader',
            options: {
              limit: 10240,
              fallback: {
                loader: 'file-loader',
                options: {
                  name: 'fonts/[name].[hash:8].[ext]'
                }
              }
            }
          }
        ]
      },
    ]
  }
}
```