webpack resolve配置

resolve 是配置解析模块规则
主要讲解这个 alias extensions modules配置使用

alias 配置解析模块路径别名：优化简写路径 缺点路径没有提示

     alias:{$css:resolve(__dirname,'src/css') },

配置好路径别名之后，不需要自己写一层一层的目录结构（注意：看路径前面的$css）

image.png

结果

image.png

extensions配置省略文件的后缀名,缺点就是文件不能起相同的名字

 extensions:['.js','.json','.css'],

配置好后缀之后，不需要自己写文件后缀（注意：看路径后缀是没有写的）

image.png

结果

image.png

modules告诉webpack去那个文件找node modeles

modules:[resolve(__dirname,'../../node_modules'),'node_modules']

整个webpack.config.js 配置代码

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

module.exports={
    entry:'./src/js/index.js',
    output:{
        filename:'js/[name].js',
        path:resolve(__dirname,'build')
    },
    module:{ //配置loader
        rules:[
            //loader
            {
                test:/\.css$/,
                use:['style-loader','css-loader'] //使用多个loader
            },
        ]
    },
      //配置解析模块规则
      resolve:{
        //配置解析模块路径别名：优化简写路径，缺点路径没有提示
        alias:{
            $css:resolve(__dirname,'src/css')
        },
        //配置省略文件的后缀名,缺点就是文件不能起相同的名字
        extensions:['.js','.json','.css'],
        //告诉webpack去那个文件找node modeles
        modules:[resolve(__dirname,'../../node_modules'),'node_modules']
    },
    plugins:[//配置插件
        new HtmlWebpackPlugin()
    ],
    mode:'development',//配置模式


}