oneOf:[] // 以下loader只会匹配一个
    enntry: ‘./src/js/index.js’,
    output: {
    finename: ‘js/built.[hash:10].js’,
    path：resolve(__dirname,’build’)
    }

    module：{
    {
    // 在package.json中eslintConfig —> airbnb
    test: /.js$/,
    // 优先执行
    enforce: ‘pre’,
    loader: ‘eslint-loader’,
    options: {
    fix: true
    }
    }
    rules: [
    {
    // 以下loader只会匹配一个
    oneOf: [
    // 正常来讲，一个文件只能被一个loader处理
    如果一个文件要被多个loader处理，那么一定要指定loader执行顺序
    先执行eslint，再执行babel
    {
    test: ‘/./js$/‘,
    exclude: /node-modules/，
    loader：’babel-loader’，
    options: {
    presets：[
    ‘@babel/preset-env’,
    {
    useBuiltInns: ‘usage’,
    corejs: {version: 3},
    targets: {
    chrome: ‘60’,
    firefox: ‘50’
    }
    }
    ],
    // 开启babel缓存
    // 第二次构建时，会读取之前的缓存(生产环境下没有HMR功能)
    catcheDirectory: true
    }
    },{}]
    }
    ]
    }

    目的： 为了解决每个文件会被loader都过一下(一个文件会匹配到多个loader的问题)
    plugins：[
    new MiniCssExtractPlugin({
    filename: ‘css/built.[hash:10].css’ // 新增hash值，webpack生成的hash值取前10位
    })
    new OptimizeCssAssetsWebpackPlugin(),
    new HtmlWebpackPlugin({
    tempalte: ‘./src/index.html’,
    minify: {
    collapseWhitespace: true,
    removeComments: true
    }
    })
    ]

    缓存
    babel缓存
    catcheDirectory: true
    —> 让第二次打包构建速度更快
    文件资源缓存:
    hash: 每次webpack构建时会生成的一个唯一的hash值。
    问题：因为js和css同时使用一个hash值，如果重新打包，会导致所有缓存失效。
    可能只改动一个文件，导致所有缓存失效
    chunkhash： 根据chunk生成hash值，如果打包来源于同一个chunk，哈希值就一样
    问题：js和css的hash值还是一样的
    因为css是在js中被引入的，所以同属于一个chunk
    chunk（代码块） 一个入口文件，入口文件中引入了其它文件，同属于同一个chunk
    contenthash: 根据问价的内容生成hash值。不同的问价hash值一定不一样