webpack5项目-配置模块如何解析

前端-webpack5汇总

目录

一.解析模块时应搜索的目录

二.解析指定扩展名文件

三.解析别名

四.总结

---

一.解析模块时应搜索的目录

module.exports = {
  //...
  resolve: {
    modules: ['node_modules'],
  },
};

如果你想要添加一个目录到模块搜索目录,此目录优先于 node_modules/ 搜索:

const path = require('path');

module.exports = {
  //...
  resolve: {
    modules: [path.resolve(__dirname, 'src'), 'node_modules'],
  },
};

二.解析指定扩展名文件

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

尝试按顺序解析这些后缀名。如果有多个文件有相同的名字，但后缀名不同，webpack 会解析列在数组首位的后缀的文件 并跳过其余的后缀。 

请注意，以上这样使用 resolve.extensions 会 覆盖默认数组，这就意味着 webpack 将不再尝试使用默认扩展来解析模块。然而你可以使用 '...' 访问默认拓展名

module.exports = {
  //...
  resolve: {
    extensions: ['.js', '.vue','.less','...'],
  },
};

三.解析别名

const path = require('path');

module.exports = {
  //...
  resolve: {
    alias: {
      '@': path.resolve(__dirname, 'src')
    },
  },
};

四.总结

webpack.config.js

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const {VueLoaderPlugin} = require('vue-loader')
 
module.exports = {
    mode: 'development',
    devtool: 'inline-source-map', //将编译后的代码映射回原始源代码
    entry: './src/main.js',
    output: {
        filename: '[name]-[contenthash:6].js', //打包后文件名
        path: path.resolve(__dirname, 'dist'),
        clean: true, //在每次构建前清理 /dist 文件夹
        assetModuleFilename: 'images/[hash:6]-[name][ext][query]', // 指定导出的文件名,只有asset/resource才可以指定文件名
    },
    plugins: [
        new HtmlWebpackPlugin({
            template: './src/index.html', //打包的文件
            title: 'webpack-demo',
            filename: "index.html", //打包后的名称
        }),
        new VueLoaderPlugin(),
    ],
    module: {
        rules: [			
            {test:/\.css$/,use:['style-loader','css-loader']},
            {test:/\.less$/,use:['style-loader','css-loader',{
                loader: "less-loader",
                options: {
                  lessOptions: {
                      "modifyVars":{
                          /* less 变量覆盖，用于自定义 ant design 主题 */
                          'primary-color': '#1890FF'
                      },
                        javascriptEnabled: true,
                      }
                }
            }]},
            {test: /\.s[ac]ss$/,use: ['style-loader','css-loader','sass-loader']},
            //自动地在 resource 和 inline 之间进行选择：小于 4kb 的文件，将会视为 inline 模块类型，否则会被视为 resource 模块类型。
            {test:/\.(jpg|png|gif|svg|jpeg)$/,type: 'asset',parser: {dataUrlCondition: {maxSize: 4 * 1024}}},
            {test:/\.(ttf|woff|svg|eot)$/,type: 'asset/inline',},
            {test:/\.vue$/,use:'vue-loader'},
            {test: /\.js$/,exclude: /node_modules/,use: "babel-loader",},
        ],
    },
    resolve: {
        modules: [path.resolve(__dirname, 'src'), 'node_modules'],
        extensions: ['.js', '.vue','.less','...'],
        alias: {
            '@': resolve_('src'),

        },
    },
 
};