webpack配置详解 - 32.resolve(解析模块规则)

 

1.文件结构

 

 

2.代码

index.css

html,
body {
    height: 100%;
    background-color: pink;
}

index.js

html,
body {
    height: 100%;
    background-color: pink;
}

webpack.vconfig.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: {
        rules: [
            {
                test: /\.css$/,
                use: ['style-loader', 'css-loader']
            },
        ]
    },
    plugins: [new htmlWebpackPlugin()],
    mode: 'development',
    //解析模块规则
    resolve: {
        //别名  配置解析模块路径别名: 优点，简写路径    缺点，路径没有提示
        alias: {
            $css:resolve(__dirname,'src/css')
        },
        // 配置省略文件路径的后缀名 (如果文件名相同，先找到 .js 就不会继续往下找)
        extensions: ['.js','.json','.jsx','.css'],
        // 告诉 webpack 解析模块时，去找哪个目录
        modules: [resolve(__dirname,'../../node_modules'),'node_modules']
    }
}

 

3.打包

$ webpack

 

 end~