webpackstudy/19/webpack.config.js

const {resolve} = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
    entry : ['./src/js/index.js','./src/index.html'],
    output:{
        filename: 'js/built.js',
        path: resolve(__dirname,'build')
    },
    module:{
        rules:[
            //less
            {
                test:/\.less$/,
                use:['style-loader','css-loader','less-loader']
            },
            //css
            {
                test:/\.css$/,
                use:['style-loader','css-loader']
            },
            //图片
            {
                test: /\.(jpg|jpeg|png|gif)$/,
                loader: 'url-loader',
                options:{
                    limit:8*1024,
                    name:'[hash:10].[ext]',
                    esModule:false,
                    outputPath: 'imgs'
                },
                type:'javascript/auto'
            },
            //html
            {
                test:/\.html$/,
                loader: 'html-loader'
            },
            //其他
            {
                exclude:/\.(html|js|css|less|jpg|jpeg|png|gif)$/,
                loader:'file-loader',
                options:{
                    name:'[hash:10].[ext]',
                    esModule:false,
                    outputPath: 'media'
                },
                type:'javascript/auto'
            }
        ]
    },
    plugins:[
        new HtmlWebpackPlugin({
            template:'./src/index.html'
        })
    ],
    mode: 'development',
    devServer:{
        contentBase:resolve(__dirname,'build'),
        compress:true,
        port:3000,
        open:true,
        hot:true
    },
    target: "web",    //可以解决browserslist 导致 webpack-dev-server 的自动刷新失效
    /**
     * source-map: 外部
     *      提示错误代码，提示源代码位置。
     * inline-source-map: 内联
     *      提示错误代码，提示源代码位置。
     * hidden-source-map: 外部
     *      提示到错误代码，错误原因，不能追踪到源代码错误，只是构建后。
     * eval-source-map: 内联
     *      提示错误代码，提示源代码位置。
     * nosources-source-map: 外部
     *      提示错误代码，没有任何源代码信息。
     * cheap-source-map: 外部
     *      提示一整行错误带，提示源代码位置。
     * cheap-module-source-map: 外部
     *      提示错误代码，提示源代码位置。module会将loader的source map加入。
     * 
     * 开发环境：速度快，调试更友好--eval-source-map
     *      eval inline cheap
     * 生产环境：隐藏源代码
     *      内联：会让代码体积变大，不考虑。
     *      mosources 、 source-map 、hidden
     */
    devtool:'hidden-source-map'

}