开发环境webpack基础配置

webpack文档内容特别多，这里整理出我平常用的webpack4.0基本的配置，给新手们参考

const path = require('path')
const webpack = require('webpack')
const HtmlWebpackPlugin = require('html-webpack-plugin')
const cleanWebpackPlugin = require('clean-webpack-plugin')

const config = {
  mode: 'development',
  entry: {
    index: './src/index.js'
  },
  output: {
    publicPath: 'public', /* html引入的js文件的路径前缀，开发环境一般不填*/
    filename: '[name].[hash].js',
    path: path.resolve(__dirname, 'dist')
  },
  devtool: 'cheap-module-eval-source-map',  /* 
                                              开发环境一般用这个，打包后的一个js文件，
                                              映射到你打包之前的js文件，可以知道你的报错位置和报错信息 
                                            */
  devServer: {
    contentBase: 'dist', /* 本地服务器开启的路径，写你打包生成的路径 */
    open: true, /* 打包后自动打开浏览器 */
    port: 8080,
    hot: true,  /* 
                  热更新，需要在plugin中加入new webpack.HotModuleReplacementPlugin()
                  js文件开启热更新需要加入以下代码：
                  if(module.hot){
                    module.hot.accept('./index.js', function() {})
                  } 
                  第一个参数填你需要监听的文件路径, 第二个参数文件发生改变后执行的回调函数
                */
    hotOnly: false /* 是否自动刷新浏览器 */
  },
  module: {
    rules: [
      {
        test: /\.js$/,
        use: {
          loader: 'babel-loader', /* 安装babel-loader @babel/core @babel/preset-env */
          options: {
            presets: [
              ['@babel/preset-env', {
                useBuildInts: 'usage'  /* 使用这个配置项需要安装@bable/polyfill */
              }]
            ]
          }
        }
      },
      {
        test: /\.css$/,
        use: [
          'style-loader',
          {
            loader: 'css-loader',
            options: {
              importLoader: 1 /* css-loader后面还有一个postcss-loader 所以填1 */
            }
          },
          'postcss-loader'  /* 
                              可以给你的css3新属性增加厂商前缀 -webkit- 。。。
                              需要安装autoprefixer并且新建一个postcss.config.js内容为： 
                              module.exports = {
                                plugin: [require('autoprefixer)]
                              }
                            */
        ]
      }, 
      {
        test: /\.(png|jpg|gif|jpeg|woff|svg|eot|ttf|woff2|otf)$/,
        use: {
          loader: 'url-loader',
          options: {
            outputPath: 'file/',
            name: '[name].[hash].[ext]',
            limit: 10240 /* 文件小于10k就生成base64 */
          }
        }
      }
    ]
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: './src/index.html'
    }),
    new webpack.HotModuleReplacementPlugin(),
    new cleanWebpackPlugin(['dist']) /* dist：打包在哪个目录就写哪个目录，用来清除之前打包的内容 */
  ]
}

module.exports = config