按照老师的写法设置loader，打包也不报错，但浏览器提示import错误，请问谁遇到过。

个回答

慕移动0201386: 2022-03-06 23:39:54

module: {
    loaders: [
        {
            test: /\.js$/,
            loader: "babel",
        }
    ]
}

检查你的正则是否正确

braveheart城市猎人

2020-04-10 21:37:05

// jshint esversion:6
const path = require('path');
const glob = require('glob'); // glob.sync()返回正则路径下所有匹配的文件
const htmlWebpackPlugin = require('html-webpack-plugin');
const { CleanWebpackPlugin } = require('clean-webpack-plugin');

// __dirname为当前绝对路径
// path.resolve:会把一个路径或者一个路径片段的序列解析为一个绝对路径
// path.join: 使用平台特定的分割符号(/或者\)把给定的path片段连接到一起，并且规范化成路径，若任意一个路径片段类型错误，会报错
//* *和 *一样，可以匹配任何内容，但**不经可以匹配路径中的某一段，而且可以匹配'a/b/c'这样带有'/'的内容，所以它还可以匹配子文件夹下的文件

let DIST_PATH = path.resolve(__dirname, '../dist');
let SRC_PATH = path.resolve(__dirname, '../src');

let entryFiles = {}; // 入口文件
let pluginAll = []; // 存放所有的html插件
// let filesTest = path.join(SRC_PATH + '/../*.js');
// console.log(filesTest);
// [\s]表示只要出现空白就匹配
// [\S]表示非空白就匹配
let jsFiles = glob.sync(SRC_PATH + '/**/*.js');
console.log(jsFiles);
jsFiles.forEach((value) => {
    let subkey = value.match(/src\/(\S*)\.js/)[1];
    entryFiles[subkey] = value;
});

let htmlFiles = glob.sync(SRC_PATH + '/**/*.html');
console.log(htmlFiles);

htmlFiles.forEach((value) => {
    let pageStr = value.match(/src\/(\S*)\.html/);
    let name = pageStr[1];
    console.log(name);
    let htmlConfig = {
        filename: path.join(DIST_PATH, name + '[chunkhash:5].html'),
        title: name,
        template: path.join(SRC_PATH, name + '.html'),
        inject: false, // script放在html里面的位置 body head true(默认值) false
        hash: true,
        chunks: [name],
        excludeChunks: [], // 排除的js
        date: new Date(),
        minify: {
            removeComments: true,
            // collapseWhitespace: true, //压缩空格
        }
    };
    // 如果是index页面，需要添加common.js到页面中
    if (name === 'index/index') {
        htmlConfig.chunks = [name, 'app'];
        console.log(htmlConfig.chunks);
    }
    let htmlPlugin = new htmlWebpackPlugin(htmlConfig);
    pluginAll.push(htmlPlugin);
});

pluginAll.push(new CleanWebpackPlugin());

module.exports = {
    // 入口js文件
    // entry : path.resolve(__dirname,'../src/index.js') , //方式一：打包一个js
    // entry : ['./src/index.js','./src/test.js'],         //方式二:把多个js打包在一起
    // entry: {                                            //方式三:把多个js分别打包成不同目录
    //     index: './src/index.js',
    //     test: './src/test.js'
    // },
    entry: entryFiles,
    // 编译输出的路径
    output: {
        path: DIST_PATH, // 本地编译后地址
        filename: '[name].[chunkhash:5].js',
        // publicPath: 'http://cdn.com', // 上线地址
    },
    // 模块解析
    module: {
        rules: [
            {
                test: /\.js$/,
                exclude: /node_modules/,
                loader: 'babel-loader',
                query: {
                    presets: ['@babel/preset-env']
                }
            }
        ]
    },
    // 插件
    plugins: pluginAll,
    // 并发服务器
    devServer: {
        hot: true, // 热更新
        contentBase: DIST_PATH,
        port: 8011, // 服务端口
        host: '0.0.0.0',// host体地址
        historyApiFallback: true,
        open: true, // 自动打开浏览器
        useLocalIp: true,// 是否在打包的时候用自己的ip
        proxy: {
            '/api': 'http://localhost:3000'
        },
        https: true
    },
    watchOptions: {
        poll: 1000,// 每秒检查一次变动
        aggregateTimeout: 500, // 防止重复按键，500毫米内算按键一次
        ignored: '/node_modules/',// 不监测大型文件夹
    }
};

0
慕数据1385771

2019-05-06 23:12:46

注意版本，老师讲课的时候是webpack1.3的版本。你现在安装的webpack 应该是4.0以上了，虽然老师讲的大部分内容还是挺好的。但有一些用法是改变了的。如loader的配置就改成下面这样了。具体可以去看npm官网关于baber-loader的配置，例如如下：
module: {
  rules: [
    {
      test: /\.js$/,
      exclude: /(node_modules|bower_components)/,
      use: {
        loader: 'babel-loader',
        options: {
          presets: ['@babel/preset-env']
        }
      }
    }
  ]
}

0
慕数据1385771

2019-05-06 16:48:50

大哥，你的layer里面的关系比较复杂吧，包括其他，js和css的引用吧，这样可能要在配置文件里面用style-loader和css-loader 配合处理才行吧。
但，如果你改成简单的弹出一个文本应该没问题的。

0