个人中心
gpt4 book ai didi

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

转载 作者：行者123 更新时间：2023-11-28 01:18:59 24 4
gpt4 key购买 nike

抱歉，我知道这个问题已被问过很多次，但似乎没有一个答案适用于我的情况。

场景是我正在编写一个 Outlook 加载项(使用此处的说明:https://learn.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

史蒂夫。

最佳答案

使用 webpack，您必须将所有 Assets (任何扩展)包含到您的入口点(在您的情况下，您可以添加到 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"
...

这些文件将位于其他 block 中，这些 block 将由 Html Webpack 插件 添加。

更新:

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

关于javascript - webpack - 如何处理来自 node_modules 文件夹的文件，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/51632049/

24 4 0
文章推荐： python - Bazel:如何在测试前运行 py_binary 以生成输入文件
文章推荐： c++ - if-else vs 三元函数调用性能
文章推荐： c++ - 如何使用 istream_iterator 从 ifstream 读取带空格的字符串？
文章推荐： javascript - 输入文件的点击事件第二次不起作用
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com