Javascript webpack-如何处理节点\模块文件夹中的文件

对不起，我知道这已经被问了很多次了，但是没有一个答案对我的情况有效

场景是，我正在编写一个Outlook加载项（使用此处的说明：），它包括来自node_模块的css文件，并使用npm start运行-显然这对于开发来说很好，但从生产角度来看，我尝试了npm build，它工作得很好，除了它保留了对node_模块/的所有引用之外，不用说，这会破坏生产文件，因为文件夹不存在

index.html（部分，截断的无关内容）

我是一名PHP开发人员，虽然我对Javascript非常熟悉，但整个网页和节点对我来说都是新鲜事，我发现学习曲线有点陡峭

短暂性脑缺血发作

---

Steve。

使用webpack，您必须将所有资产（任何扩展）包含在入口点中（在您的情况下，您可以添加到

src/index.js

）。通过这样做，webpack可以理解您正在使用的所有依赖项，并正确地解析/编译/绑定它们，而不会遇到这些类型的问题。您不能手动将链接添加到

index.html

，因为这样做时，网页不知道您在添加什么

在您的情况下，正确的方法是：

index.js

：

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

这些文件将在其他块中，这些块将由

HTMLWebpackPlugin

添加

更新：

要从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' }]
        ),
    ]
};

---

谢谢，在将css编码到js文件中时，它最初只是将app.js文件的大小变小了！我已经改变了这一点，所以它使用文件加载器，并将它们保存到assets/css/now中-几乎完成了！但是，它不会更新index.html，它仍然指向node_modules/。。。我是否可以让它重新写入链接标记指向的位置，使其从node_modules/office ui fabric js/dist/css/fabric.min.css更改为assets/css/fabric.min.css？我可以简单地更改HREF，但它会在开发模式下破坏它。嗯，是的，它增加了app.js的大小，但是你应该使用MinicsExtractPlugin（如果webpack>4）或ExtractTextPlugin（webpack<3）。这将从js中删除css，并将它们放入单独的css文件中。Html文本插件应该使用此更新hrefs。所以我可以更新答案，你使用的是哪个版本的网页？根据npm，4.6。0@SteveChilds我发布的版本是4.x.x兼容的，所以去吧。

import "office-ui-fabric-js/dist/css/fabric.min.css"
import "office-ui-fabric-js/dist/css/fabric.components.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' }]
        ),
    ]
};