Question

对不起，我知道这已经被问了很多次了，但是在我看来，所有答案都没有用。

这种情况是，我正在编写一个Outlook加载项（使用此处的说明：https://docs.microsoft.com/en-us/outlook/add-ins/addin-tutorial），它包含来自node_modules的css文件，并使用npm start运行-显然，这对开发工作正常，但是使用着眼于生产，我尝试了npm build并运行良好，除了它保留了对node_modules /的所有引用不变之外，不用说，由于该文件夹不存在，这会破坏生产文件。

index.html（不相关的部分，被截断）

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=Edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Engage Demo</title>

    <!-- Office JavaScript API -->
    <script type="text/javascript" src="https://appsforoffice.microsoft.com/lib/1.1/hosted/office.debug.js"></script>

    <!-- LOCAL -->
    <link rel="stylesheet" href="node_modules/office-ui-fabric-js/dist/css/fabric.min.css" />
    <link rel="stylesheet" href="node_modules/office-ui-fabric-js/dist/css/fabric.components.css" />

    <!-- CDN -->
    <!-- For the Office UI Fabric, go to http://aka.ms/office-ui-fabric to learn more. -->
    <!--<link rel="stylesheet" href="https://static2.sharepointonline.com/files/fabric/office-ui-fabric-js/1.2.0/css/fabric.min.css" /> -->
    <!--<link rel="stylesheet" href="https://static2.sharepointonline.com/files/fabric/office-ui-fabric-js/1.2.0/css/fabric.components.min.css" /> -->

    <!-- Template styles -->
    <link href="app.css" rel="stylesheet" type="text/css" />
</head>

在理想情况下，我将使用条件编译语句，该语句将交换本地链接，并在生产构建中将其替换为CDN链接（但是这种方法看起来非常复杂）

因此，删除CDN链接很好，但是如何获取webpack将“ node_modules / office-ui-fabric-js / dist / css / fabric.min.css”移动到“ assets / css / fabric.min” .css'？

webpack.config.js

const HtmlWebpackPlugin = require('html-webpack-plugin');
const CopyWebpackPlugin = require('copy-webpack-plugin');


module.exports = {
    entry: {
        polyfill: 'babel-polyfill',
        app: './src/index.js',
        'function-file': './function-file/function-file.js'
    },
    module: {
        rules: [
             {
                 test: /\.css$/,
                 loader: "style-loader!css-loader"
             },
            {
                test: /\.js$/,
                exclude: /node_modules/,
                use: 'babel-loader'
            },
            {
                test: /\.html$/,
                exclude: /node_modules/,
                use: 'html-loader'
            },
            {
                test: /\.(png|jpg|jpeg|gif)$/,
                // exclude: /assets/,
                use: [
                    {
                         loader : 'file-loader',
                        options :
                            {
                                name: "/assets/[name].[ext]"
                            }
                     }
                ],
            }
        ]
    },
    plugins: [
        new HtmlWebpackPlugin({
            template: './index.html',
            chunks: ['polyfill', 'app']
        }),
        new HtmlWebpackPlugin({
            template: './function-file/function-file.html',
            filename: 'function-file/function-file.html',
            chunks: ['function-file']
        }),
        new CopyWebpackPlugin(
            [{ from: './assets', to: './assets', toType : 'dir' }]
        ),
    ]
};

任何帮助都会感激不尽，我是一名PHP开发人员，虽然我对Javascript更加熟悉，但是整个webpack和node对我来说都是新的，我发现学习曲线有些陡峭！

TIA

史蒂夫。

Answer 1

使用webpack，必须将所有资产（任何扩展名）都包含在入口点中（对于您而言，可以添加到src/index.js中）。通过这样做，webpack可以了解您正在使用的所有依赖项，并正确地解析/编译/捆绑它们，并且您不会遇到这些类型的问题。您不得手动将链接添加到index.html，因为这样做会使webpack无法识别您要添加的内容。

根据您的情况，正确的方法是：

index.js：

import "office-ui-fabric-js/dist/css/fabric.min.css"
import "office-ui-fabric-js/dist/css/fabric.components.css"
...

这些文件将位于其他块中，并由Html Webpack plugin添加。

更新：

要从js文件中提取CSS，请执行以下操作：

const HtmlWebpackPlugin = require('html-webpack-plugin');
const CopyWebpackPlugin = require('copy-webpack-plugin');
const ExtractTextPlugin = require("extract-text-webpack-plugin/");


module.exports = {
    entry: {
        polyfill: 'babel-polyfill',
        app: './src/index.js',
        'function-file': './function-file/function-file.js'
    },
    module: {
        rules: [
             {
                 test: /\.css$/,
                 use: ExtractTextPlugin.extract({
                    fallback: 'style-loader',
                    use: 'css-loader'
                 })
             },
            {
                test: /\.js$/,
                exclude: /node_modules/,
                use: 'babel-loader'
            },
            {
                test: /\.html$/,
                exclude: /node_modules/,
                use: 'html-loader'
            },
            {
                test: /\.(png|jpg|jpeg|gif)$/,
                // exclude: /assets/,
                use: [
                    {
                         loader : 'file-loader',
                        options :
                            {
                                name: "/assets/[name].[ext]"
                            }
                     }
                ],
            }
        ]
    },
    plugins: [
        new ExtractTextPlugin("styles.css"),
        new HtmlWebpackPlugin({
            template: './index.html',
            chunks: ['polyfill', 'app']
        }),
        new HtmlWebpackPlugin({
            template: './function-file/function-file.html',
            filename: 'function-file/function-file.html',
            chunks: ['function-file']
        }),
        new CopyWebpackPlugin(
            [{ from: './assets', to: './assets', toType : 'dir' }]
        ),
    ]
};

webpack-如何处理来自node_modules文件夹的文件

1 个答案: