javascript - 如何使用 webpack bundle javascript 文件/Jquery 文件？

Question

我能够使用 webpack 成功地 bundle 我的 sass 文件，但我在打包我的 javascript 文件时遇到了问题。我在 css 上做的方式是入口点是 ./public/javascript/index.js 其中包含 import '../sass/main.scss';然后 main.scss 包含类似 @import "layout/header"的内容；还有更多。问题是我将如何打包 javascript 文件？

例如我有我的javascript文件 \public\js\--> js 文件，如 test.js 等。

我在下面提供了我的 webpack 配置。

我的 webpack 配置

const javascript = {
    test: /\.(js)$/,
    use: {
        loader: 'babel-loader',
        options: {
            presets: ['@babel/env']
        }
    }
}

const images = {
    test: /\.(jpg|jpeg|png|gif)$/,
    use: {
        loader: 'file-loader',
        options: {
            outputPath: '../images/'
        }
    }
}

const postcss = {
    loader: 'postcss-loader',
    options: {
        plugins() { return [ autoprefixer({ browsers: 'last 5 versions' }) ]; }
    }
}

const styles = {
    test: /\.scss$/,
    use: [
        'style-loader',
        MiniCssExtractPlugin.loader,
        'css-loader',
        postcss,
        'sass-loader'
    ]
}

const config = {
    watch: true,
    watchOptions: {
        poll: true,
        ignored: /node_modules/
    },
    entry: './public/javascript/index.js',
    output: {
        path: path.resolve(__dirname, 'public', 'dist'),
        filename: 'main.js'
    },
    module: {
        rules: [
            javascript,
            images,
            styles
        ]
    },
    plugins: [
        new MiniCssExtractPlugin({
            filename: 'style.bundle.css'
        }),
        new OptimizeCssAssetsPlugin({
            assetNameRegExp: /\.css$/g,
            cssProcessor: require('cssnano'),
            cssProcessorOptions: { preset: 'default', discardComments: { removeAll: true } },
            canPrint: true
        })
    ]
}

Answer 1

从最简单的解释来看，Webpack 是一个 javascript 打包器。有插件支持其他 Assets ，如 css，但 webpack hello world 会为你 bundle 你的 javascript。

通过定义一个入口点，您要求 webpack 遍历您使用 import/require 语句创建的模块依赖关系树，并将它沿途找到的脚本打包到一个输出文件中。

如果您要在 ./public/javascript 中创建一个名为“foo.js”的文件并在您的 index.js 文件中添加一个 import "./foo";，您会看到在运行你的 webpack 构建之后，你添加到 foo.js 的任何代码都会出现在你的 main.js 中