Question

我目前正在尝试将旧的AngularJs 1.x项目升级到最新的Angular 2+。在这个项目中 Gulp用于缩小所有JS和LESS文件。现在，我想为此目的而移至Webpack。但是，在设置/运行webpack时我遇到了一些问题。

在我的项目中，我有许多通用库（只是一堆依赖项JS供应商/旧脚本），目前正在使用gulp对其进行缩小，如下所示：

gulp.task('scripts', function() {

return gulp.src([

    // Generic Libraries.

    'assets/js/vendor/beautify-html.js',
    'assets/js/vendor/moment.js',
    'assets/js/vendor/moment-range.js',
    'assets/js/vendor/html2canvas.js',
    'assets/js/vendor/toggles.js',
    'assets/js/vendor/alertify.js',
    'assets/js/vendor/spectrum.js',
    'assets/js/vendor/zero-clip.min.js',
    'assets/js/vendor/contextMenu.js',
    'assets/js/vendor/emojione.min.js',
    'assets/js/vendor/string-format.js',
    'assets/js/vendor/tinycolor-min.js',
    'assets/js/vendor/matrix.js',
    'assets/js/vendor/sanitize.js',
    'assets/js/vendor/sha1.min.js',
    'assets/js/vendor/pace.min.js',

    'assets/js/vendor/dynamics.js/lib/dynamics.js',

    'assets/js/vendor/pace/pace.js',

    'assets/js/vendor/pace-ng-file-upload-patch.js',

])

// Generate Minified Script.

    .pipe(concat('builder.min.js'))
    .pipe(ngAnnotate())
    .pipe(uglify({mangle:false}).on('error', gutil.log))
    .pipe(gulp.dest('assets/js'))

    .pipe(browserSync.reload({
        stream: true
    }));
});

要在webpack中做同样的事情，我在项目中设置了一个入口文件（_builder.js），该文件将如下所示导入Assets / js / vendor /文件夹中的所有脚本：

export const importAll = (r) => {
   r.keys().forEach(r);
};

importAll(require.context('../assets/js/vendor', false, /\.js$/));

因此，我的 webpack.config.js 文件目前如下：

const path = require('path');
const { CleanWebpackPlugin } = require("clean-webpack-plugin");
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const OptimizeCssAssetsPlugin = require("optimize-css-assets-webpack-plugin");
const TerserPlugin = require("terser-webpack-plugin");
var nodeExternals = require('webpack-node-externals');

module.exports = {
    mode: 'development',
    entry: {
        builder: './entryPoints/_builder.js',
        iframe: './entryPoints/_iframe.js',
        triggerController: './entryPoints/_triggerController.js'
    },
    optimization: {
        minimizer: [
          new OptimizeCssAssetsPlugin(),
          new TerserPlugin(),
        ]
    },
    plugins: [
        new MiniCssExtractPlugin({
            filename: "[name].css",
            path: path.resolve(__dirname, 'dist'),
        }),
        new CleanWebpackPlugin(),
    ],
    module: {
        rules: [
            {
                test: /\.less$/,
                use: [
                    MiniCssExtractPlugin.loader,
                    {
                        loader: 'css-loader',
                        options: {
                            sourceMap: true,
                            url: false,
                        },
                    },
                    "less-loader",
                ]
            },
        ],
    },
    output: {
        filename: '[name].min.js',
        path: path.resolve(__dirname, 'dist'),
    },
};

运行webpack时，我会遇到此错误：

WARNING in ./assets/js/vendor/moment.js
Module not found: Error: Can't resolve './locale' in 'I:\xampp\htdocs\aiva-create\assets\js\vendor'
 @ ./assets/js/vendor/moment.js
 @ ./assets/js/vendor sync nonrecursive \.js$
 @ ./entryPoints/_builder.js
ERROR in ./assets/js/vendor/beautify-html.js
Module not found: Error: Can't resolve './beautify-css' in 'I:\xampp\htdocs\aiva-create\assets\js\vendor'
 @ ./assets/js/vendor/beautify-html.js 819:8-828:10 821:32-60
 @ ./assets/js/vendor sync nonrecursive \.js$
 @ ./entryPoints/_builder.js
ERROR in ./assets/js/vendor/angular.easypiechart.min.js
Module not found: Error: Can't resolve 'angular' in 'I:\xampp\htdocs\aiva-create\assets\js\vendor'
 @ ./assets/js/vendor/angular.easypiechart.min.js 9:53-97
 @ ./assets/js/vendor sync nonrecursive \.js$
 @ ./entryPoints/_builder.js
ERROR in ./assets/js/vendor/moment-range.js
Module not found: Error: Can't resolve 'moment' in 'I:\xampp\htdocs\aiva-create\assets\js\vendor'
 @ ./assets/js/vendor/moment-range.js 4:4-6:6
 @ ./assets/js/vendor sync nonrecursive \.js$
 @ ./entryPoints/_builder.js

当尝试在我的项目的vendors文件夹中导入任何其他依赖项/旧脚本时，我遇到类似的错误。知道如何为我的项目解决此错误吗？我可以在我的webpack配置文件中添加任何其他选项来解决此问题？

更新：因此，我发现这些错误可能只是由于项目中缺少节点包而导致的。因此，我为所有这些缺少的软件包运行了npm-install，现在相应的错误消息都消失了。我无法解决其中一个错误： ERROR in ./assets/js/vendor/beautify-html.js，但由于我可能不需要此脚本，因此暂时将其排除在外。我仍然不确定在使用来自webpack的捆绑js运行项目时是否会遇到任何问题，因此我将一直保持此问题公开，直到一切都清楚为止。另外请注意，我仍然不确定为什么在未安装这些软件包的情况下运行gulp时不会出现这些错误。

尝试从gulp迁移到Webpack

0 个答案: