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

【问题标题】：webpack - how to handle files from node_modules folderswebpack - 如何处理来自 node_modules 文件夹的文件
【发布时间】：2019-01-08 22:50:58
【问题描述】：

抱歉，我知道这个问题已经被问过很多次了，但在我的情况下似乎没有一个答案有效。

场景是我正在编写一个 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

史蒂夫。

【问题讨论】：

标签： javascript css node.js webpack node-modules

【解决方案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' }]
        ),
    ]
};

【讨论】：

谢谢，这最初只是简单地扩大了 app.js 文件的大小，因为它将 css 编码到了 JS 文件中！我已经改变了它，所以它现在使用文件加载器并将它们保存到 assets/css/ 中 - 几乎完成了！但是，它不会更新仍然指向 node_modules/... 的 index.html 我可以让它重写链接标签指向的位置，所以它从 node_modules/office-ui-fabric-js /dist/css/fabric.min.css 到 assets/css/fabric.min.css ？我可以简单地更改href，但它会在开发模式下破坏它..
嗯，是的，它增加了 app.js 的大小，但你应该使用 MiniCssExtractPlugin（如果 webpack > 4）或 ExtractTextPlugin（webpack
根据 npm，4.6.0
@SteveChilds 我发布的版本是 4.x.x 兼容的，所以去吧。