14、webpack resolve属性

resolve：配置模块如何解析。例如，当在 ES2015 中调用 import 'lodash'，resolve 选项能够对 webpack 查找 'lodash' 的方式去做修改

• 1、解析第三方包

module.exports = {
  resolve: {
    modules: [ path.resolve('node_modules') ]
  }
}

• 2、主入口文件名称

module.exports = {
  resolve: {
    mainFields: [ 'style', 'main' ]
    // mainField: []    // 入口文件名字
  }
}

• 3、别名

module.exports = {
  resolve: {
   alias: {
    '@': path.resolve('src')
   }
  }
}

• 4、扩展名

module.exports = {
  resolve: {
   extensions: ['.js', '.css', '.json', '.vue']
  }
}

index.js案例

import '@/style'

style.css案例

body {
    background-color: red;
}

webpack.config.js完整配置

//  webpack是node写出来的， 需要node的写法
let path = require('path');
// path.resolve 相对路径转成绝对路径
// console.log(path.resolve('dist'));
// 以当前目录
// console.log(__dirname);

// html-webpack-plugins 插件
let HtmlWebpackPlugins = require('html-webpack-plugin');

// 清除插件
let { CleanWebpackPlugin } = require('clean-webpack-plugin');
let MiniCssExtractPlugin = require('mini-css-extract-plugin');
// 复制插件
let copyWebpackPlugin = require('copy-webpack-plugin');

// 署名插件
let webpack = require('webpack');

// webpack相关配置
module.exports = {
    // 开发服务的配置
    devServer: {
        // 端口，默认8080
        port: '8099',
        // 进度条
        progress: true,
        // 启动后访问目录，默认是项目根目录，这个设置到打包后目录
        contentBase: './build',
        // 启动压缩
        //compress: true
        // 1、挡板
        before(app){
            app.get('/api/list', (req, res)=>{
                res.json({name: 'mockData'});
            })
        },
        // 2、代理
        // proxy: {
        //     //'/api': 'http://localhost:3000'
        //     '/api/*': {
        //         target: 'http://localhost:3000/api',
        //         pathRewrite: {'^/api/*': ''}
        //     }
        // }
    },
    // 模式，2种：生产模式(production)和开发模式(development)
    // 开发模式不压缩打包后代码，生产模式压缩打包后代码
    mode: 'production',
    // 1、source-map：产生文件，产生行列
    // devtool: 'source-map',
    // 2、eval-source-map：不产生文件，产生行类
    //devtool: 'eval-source-map',
    // 3、cheap-source-map：产生文件，不产生列
    //devtool: 'cheap-module-source-map',
    // 4、cheap-module-eval-source-map：不产生文件，不产生列
    //devtool: 'cheap-module-eval-source-map',

    // 监听
    // watch: true,
    // watchOptions: {
    //     poll: 1000, // 每秒询问多少次
    //     aggregateTimeout: 500,  //防抖 多少毫秒后再次触发
    //     ignored: /node_modules/ //忽略时时监听
    // },

    // 入口,表示从哪里开始打包
    entry: {
        home: './src/index.js'
    }, 
    // 表示出口(输出后文件相关配置)
    output: {   
        // 打包后的文件名 多入口根据入口名称生成
        filename: 'build.js',  
        // 输出后的路径(必须是一个绝对路径)
        path: path.resolve(__dirname, 'dist')
    },
    // 插件配置
    plugins: [
        new HtmlWebpackPlugins({
            // 模板位置
            template: 'index.html',
            // 文件名
            filename: 'index.html'
        }),
        // 抽离css为单独文件
        new MiniCssExtractPlugin({
            filename: 'main.css'
        }),
        // 清除插件
        // new CleanWebpackPlugin(); // 默认删除打包目录
        new CleanWebpackPlugin({
            outputPath: './dist'
        }),
        // 复制
        new copyWebpackPlugin([
            { from: './src/app.json', to: './' }
        ]),
        // 署名插件
        new webpack.BannerPlugin('by SM')
    ],
    //
    resolve: {
        // 解析三方库文件
        //modules: [ path.resolve('node_modules') ],
        // 扩展名
        extensions: ['.js', '.css', '.json', '.vue'],
        // 定义路径别名
        alias: {
            '@': path.resolve('src')
        }
    },
    module: {
        // loader
        rules: [
            {
                test: /\.css$/, //匹配css文件
                use: [ MiniCssExtractPlugin.loader, 'css-loader']
            },
            {
                test: /\.less$/, //匹配less文件
                use: [ MiniCssExtractPlugin.loader, 'css-loader', 'less-loader']
            },
            {
                test: /\.js$/, //匹配js文件
                use: {
                    loader: 'babel-loader',
                    options: {
                        presets: [
                            '@babel/preset-env'
                        ]
                    }
                }
            }
        ]
     }
}