webpack最基本配置

webpack.config.js

const path = require('path');
// html 生成
const HtmlWebpackPlugin = require('html-webpack-plugin');
// 打包前清空打包输出目录dist
const { CleanWebpackPlugin } = require('clean-webpack-plugin');
module.exports = {
  mode: 'development',
  entry: path.resolve(__dirname, 'src/index.js'),
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'dist'),
    publicPath: '/'
  },
  devtool: 'eval-cheap-module-source-map',
  resolve: {
    extensions: ['.js', '.vue', '.json'],
    alias: {
      'vue$': 'vue/dist/vue.esm.js',
      '@': path.resolve(__dirname, 'src')
      // '@': './src'
    }
  },
  devServer: {
    contentBase: path.resolve(__dirname, './dist'),
    port: 3000,
    // hot: true,
    open: true
  },
  module: {
    rules: [
      // css文件处理
      {
        test: /\.css$/,
        use: [
          'style-loader',
          'css-loader'
        ]
      },
      // css transform  css-loader 处理import，style-loader是个脚本，在css-loader处理基础上继续处理，以让webpack能够使用
      // sass-loader、node-sass都需要
      {
        test: /\.(sass|scss)$/,
        use: [
          'style-loader',
          'css-loader',
          'sass-loader'
        ]
      },
      // 图片
      // url-loader 依赖 file-loader
      {
        test: /\.(png|svg|jpe?g|gif)(\?.*)?$/,
        loader: 'url-loader',
        options: {
          limit: 10000,
          // name: '[name].[hash:7].[ext]',
          // outputPath: 'assets/image/',
          // 该配置项为图片打包后的默认路径，带default对象，默认为ture，在配置项里将此项改为false即可去掉多余的defalut对象，处理html-withimg-loader 打包html中图片src是个有default属性的对象问题
          esModule: false, // 该项默认为true，改为false即可

          // 或者不配置outputPath，将outputPath和name拼接成一位字符串
          name: 'assets/image/[name].[hash:7].[ext]'
        }
      },
      {
        test: /\.(mp4|webm|ogg|mp3|wav|flac|aac)(\?.*)?$/,
        loader: 'url-loader',
        options: {
          limit: 10000,
          name: 'assets/media/[name].[hash:7].[ext]'
        }
      },
      {
        test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/,
        loader: 'url-loader',
        options: {
          limit: 10000,
          name: 'assets/fonts/[name].[hash:7].[ext]'
        }
      },
      // babel 支持高级js语法
      // 1、安装babel-loader、@babel/core、@babel/preset-env、@babel/plugin-transform-runtime、@babel/runtime【@babel/plugin-transform-runtime依赖此包】
      // 2、配置.babelrc
      {
        test: /\.js$/,
        use: [
          'babel-loader'
        ]
      },
      // html html中如有图片引入可自动替换为打包后的路径,
      // 需要设置url-loader中的ouput中的publicPath，不配置的话直接就是'/icon.png'
      {
        test: /\.(htm|html)$/,
        loader: 'html-withimg-loader'
      }
    ]
  },
  plugins: [
    // html模板，生成打包文件自动引入
    new HtmlWebpackPlugin({
      title: 'webpack demo',
      filename: 'index.html',
      template: path.resolve(__dirname, 'index.html'),
      // bundle文件插入位置，true(默认为body)、body、head、false
      inject: true
    }),
    // 打包前清空打包输出目录，默认会清所有的ouput.path目录
    new CleanWebpackPlugin(),
  ]
}

 

.babelrc

{
  "presets": [
    ["@babel/preset-env", {
      // 按需加载需要的polyfill
      "useBuiltIns": "usage"
    }]
  ],
  "plugins": [
    "@babel/transform-runtime"
  ]
}

 

 

 

-----smile