webpack-如何处理node_modules文件夹中的文件

Question

Sorry, I know this has been asked loads of times, but none of the answers appears to work in my case. 抱歉，我知道有人问过很多次，但在我看来，所有答案都没有用。

The scenario is that I'm writing an Outlook Add In (using the instructions here: https://docs.microsoft.com/en-us/outlook/add-ins/addin-tutorial ), it includes css files from node_modules and is run using npm start - clearly this works fine for development, but with an eye on production, I tried npm build and it works fine, apart from the fact it leaves all the references to node_modules/ intact, which needless to say, breaks the production files as the folder does not exist. 该场景是我正在编写一个Outlook加载项（使用此处的说明： https ://docs.microsoft.com/en-us/outlook/add-ins/addin-tutorial），它包括来自node_modules的css文件和是使用npm start运行的-显然，这对开发工作是很好的，但是从生产的角度来看，我尝试了npm build，并且工作正常，除了它保留了对node_modules /的所有引用不变的事实，这不用说会破坏生产文件，因为该文件夹不存在。

index.html (part, truncated irrelevant content) 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>

In an ideal world, I'd use a conditional compile statement which would swap the local links and replace them with the CDN links in production build (but this approach appeared to be hugely convoluted) 在理想的世界中，我将使用条件编译语句，该语句将交换本地链接，并在生产构建中将其替换为CDN链接（但是这种方法看起来非常复杂）

So, removing the CDN links is fine, but how can I get webpack to move 'node_modules/office-ui-fabric-js/dist/css/fabric.min.css' to 'assets/css/fabric.min.css' ? 因此，删除CDN链接很好，但是如何获取webpack来将“ node_modules / office-ui-fabric-js / dist / css / fabric.min.css”移动到“ assets / css / fabric.min.css” ？

webpack.config.js 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' }]
        ),
    ]
};

Any help would be gratefully received, I'm a PHP dev by trade and whilst I'm more than familiar with Javascript, the whole webpack and node thing is new to me and I'm finding the learning curve slightly steep! 任何帮助将不胜感激，我是一名来自PHP的行业开发人员，虽然我对Javascript更加熟悉，但是整个webpack和node对我来说都是新事物，我发现学习曲线有些陡峭！

TIA TIA

Steve. 史蒂夫。

Answer 1

With webpack, you have to have all your assets (any extension) included into your entrypoint (in your case, you can add to src/index.js ). 使用webpack，您必须将所有资产（任何扩展名）都包含在入口点中（对于您而言，可以添加到src/index.js ）。 By doing that, webpack can understand all the dependencies that you are using and parse/compile/bundle them correctly and you don't run into these types of problems. 通过这样做，webpack可以了解您正在使用的所有依赖项，并正确地解析/编译/捆绑它们，并且您不会遇到这些类型的问题。 You must not add links to your index.html manually, because by doing that webpack is not aware of what you are adding. 您不得手动将链接添加到index.html ，因为这样做会使webpack无法识别您要添加的内容。

The correct approach, in your case is: 在您的情况下，正确的方法是：

index.js : index.js ：

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

These files are going to be in other chunks, which are going to be added by Html Webpack plugin . 这些文件将位于其他块中，这些文件将由Html Webpack plugin添加。

Update: 更新：

To extract css from js files: 要从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 个解决方案

解决方案1
0 2018-08-01 12:00:52

webpack-如何处理node_modules文件夹中的文件

问题描述

1 个解决方案

解决方案1 0 2018-08-01 12:00:52

解决方案1
0 2018-08-01 12:00:52