Question

我正在尝试使用代码拆分在我的ASP.NET Core项目中配置webpack。

我有以下文件：

main.ts（依赖于jQuery）
site.scss
base.css

我希望webpack在我的“wwwroot”文件夹中创建一个“dist”文件夹，其中包含以下文件：

vendor.js（使用jQuery / no source-map）
site.js（我的代码来自main.ts和source-map）
base.css
的site.css

我的webpack配置目前创建此输出：

base.css
blubb.js（几乎为空文件）
site.css（带有源图）
site.js（带有源图）
vendor.js（使用source-map）

我知道为什么webpack会做这些事情，但我不知道我需要改变什么。

这是我的 webpack.config.js 配置：

var path = require('path');
var webpack = require("webpack");
const merge = require('webpack-merge');
const ExtractTextPlugin = require("extract-text-webpack-plugin");

module.exports = (env) => {

    const site = merge({
        entry: {
            site: ['./Client/ts/main.ts', './Client/scss/site.scss'],
            vendor: ['jquery']
        },
        output: {
            filename: '[name].js',
            path: path.resolve(__dirname, 'wwwroot/dist/')
        },
        module: {
            rules: [
                {
                    test: /\.tsx?$/,
                    loader: 'ts-loader',
                    exclude: /node_modules/,
                },
                {
                    test: /\.scss$/,
                    use: ExtractTextPlugin.extract({
                        fallback: 'style-loader',
                        use: ['css-loader', 'sass-loader']
                    })
                },
                {
                    test: /\.css$/,
                    use: ExtractTextPlugin.extract({
                        fallback: "style-loader",
                        use: "css-loader"
                    })
                }
            ]
        },
        resolve: {
            extensions: [".tsx", ".ts", ".js"]
        },
        plugins: [
            new webpack.ProvidePlugin({ $: 'jquery', jQuery: 'jquery' }),
            new ExtractTextPlugin("site.css"),
            new webpack.optimize.CommonsChunkPlugin({ name: 'vendor' })
        ],

        devtool: "source-map"
    });

    const vendor = merge({
        entry: {
            site: ['./Client/css/base.css' ]
        },
        output: {
            path: path.resolve(__dirname, 'wwwroot/dist/'),
            filename: 'blubb.js',
        },
        module: {
            rules: [
                {
                    test: /\.css$/,
                    use: ExtractTextPlugin.extract({
                        fallback: "style-loader",
                        use: "css-loader"
                    })
                }
            ]
        },
        plugins: [
            new ExtractTextPlugin("base.css")
        ]
    });

    return [site, vendor];
};

我可以在配置中更改哪些内容以实现目标？我只想将我的代码与外部依赖项分开。

Webpack Code Splitting - 如何拆分为普通文件和供应商文件？

0 个答案: