Question

我有一个angular 6应用，它使用webpack 4（我没有使用ng cli），并且具有以下结构：

myNgApp/
├── config/
│   ├── webpack.common.js
│   ├── webpack.dev.js
│   ├── webpack.prod.js
|   ├── // other webpack related scripts
└── src/
    └─ app/
       ├─ themes/
       |    ├── dark.theme.scss
       |    └── blue.theme.scss
       ├─ components/
       ├─ app.component.scss
       ├─ app.component.html
       ├─ app.component.ts
       ├─ app.module.ts

 ... // More files

我想要实现的是：

创建单独的css文件[app.css，vendor.css，dark.theme.css，blue.theme.css]
将2个主要的css文件（app.css，vendor.css）移动到文件夹dist/css并将它们包含在我的应用程序的head标记中
将主题文件（dark.theme.css，blue.theme.css）移动到文件夹dist/css/themes，但不要将其包括在我的应用程序的head标签中（我想通过以下方式管理主题我的申请）

所以我的捆绑包应如下所示：

myNgApp/
├── dist/
│   ├── css/
│   │    ├── themes/
│   │    │    ├── dark.theme.css
│   │    │    ├── blue.theme.css
│   │    │
│   │    ├─ app.css    
|   |    └─ vendor.css
│   │
│   └── // other files    
│
├── config.sh
└── install.bat
 ... // More files

我当前的webpack.common.js：

module.exports = {
entry: {
    "polyfills": "./src/polyfills.ts",
    "vendor": "./src/vendor.ts",
    "app": "./src/main.ts"
},

resolve: {
    extensions: [".ts", ".js"]
},

module: {
    rules: [
        {
            test: /\.(css|scss)$/,
            include: [
                path.resolve(__dirname, "./src/app/themes")
            ],
            use: [
                {
                    loader: "css-loader",
                    options: {
                        sourceMap: true
                    }
                }
            ]

        },
        {
            test: /\.(css|scss)$/,
            use: [
                {
                    loader: MiniCssExtractPlugin.loader,
                    options: {
                        publicPath: '../'
                    }
                },
                {
                    loader: "css-loader",
                    options: {
                        sourceMap: true
                    }
                },
                {
                    loader: "sass-loader",
                    options: {
                        sourceMap: true,
                        includePaths: [
                            path.resolve(__dirname, "../src/app/")
                        ]
                    }
                }
            ]
        }
    ]
},

plugins: [
]
};

Answer 1

您可以根据输出路径将输入键设置为输出目的地。所以首先您需要一个output ...

output: {
  path: path.join(__dirname, "dist"),
  filename: "[name].js"
}

现在您的entry: {"app": "./src/main.ts"}将转到dist； dist/app.js

添加where the file should go based on dist: where the file is now的条目。请记住，每个js文件都会得到一个额外的scss文件，但是您可以删除/忽略它们。

entry: {
    "polyfills": "./src/polyfills.ts",
    "vendor": "./src/vendor.ts",
    "app": "./src/main.ts",
    "./css": "path-to-app.scss",
    "./css": "path-to-vendor.scss",
    "./css/themes: "path-to-blue.theme.scss",
    "./css/themes: "path-to-dark.theme.scss",
}

此外，w / this ^设置，我认为您只需为所有样式设置1条规则...

    {
        test: /\.s?css$/,
        use: [
            loader: MiniCssExtractPlugin.loader,
            {
                loader: "css-loader",
                options: { sourceMap: true }
            },
            {
                loader: "sass-loader",
                options: { sourceMap: true }
            }
        ]
    }

从scss创建CSS，然后移至特定文件夹，但不包含在标题中

1 个答案: