如何使用 webpack 打包 javascript files/Jquery 文件？

Question

我能够使用 webpack 成功地捆绑我的 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 捆绑器。有支持其他资产的插件，例如 css，但是 webpack hello world 会为您捆绑 javascript。

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

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

如何使用 webpack 打包 javascript files/Jquery 文件？

How to bundle javascript files/Jquery Files using webpack?

javascript

bundle

node.js

webpack

我的 webpack 配置