webpackstudy/32/webpack.config.js

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

/**
 * 
 */
module.exports = {
    entry: './src/index.js',
    output: {
        filename:'[name].js',
        path:resolve(__dirname,'build')
    },
    module:{
        rules:[
            {
                test:/\.css$/,
                use:['style-loader','css-loader']
            }
        ]
    },
    plugins: [
        new HtmlWebpackPlugin()
    ],
    mode: 'development',
    /**
     * 解析模块规则
     */
    resolve:{
        //配置解析路径别名 缺点：编辑器无提示
        alias:{
            $css: resolve(__dirname,'src/css')
        },
        //配置省略文件路径的后缀名
        extensions:[
            '.js','.json','.css'
        ],
        //告诉webpack解析模块位置
        modules:[
            resolve(__dirname,'../node_modules'),'node_modules'
        ]
    }
}