Question

这是我的文件结构：

├── public/
│   ├── assets
│   │   ├── node_modules
│   │   │   ├── jquery
│   │   │   ├── etc... 
│   │   ├── images
│   │   ├──  icons
│   │   ├──  package.json
│   ├── es
│   │   ├── index.js
│   ├── js
│   │   ├── bundle.js
│   ├── scss
│   ├── css
│   ├── index.php
├── app/
│   ├── contollers
│   ├── models
│   ├── views
│   ├── helpers
├── node_modules/
│   ├── webpack/
│   │   ├── ... 
│   │   │   ├── ...
├── package.json
└── webpack.conf.js/

我创建了2个单独的npm，一个用于开发的根文件夹（/www），另一个用于public/assets/下的资产（图像，图标和node_modules）。

我想将jquery库（例如）模块加载到我的index.js文件中。

尝试：

import '../scss/style.scss';

import {$,jQuery} from '../assets/node_models/jquery';

返回

./public/es/index.js中的
ERROR找不到模块：错误：无法解析 / www / public / es中的'../assets/node_models/jquery'@ ./public/es/index.js 5：14-53

这是我的webpack.conf.js文件：

const path              = require('path');
const ExtractTextPlugin = require('extract-text-webpack-plugin');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const UrlLoader         = require('url-loader');

module.exports = {

    entry: { 
                main: './public/es/index.js' 
    },
    output: {
                path:       path.resolve(__dirname, 'public/js/'),
                filename:   'bundle.js'
    },
    module: {
                rules: [
                            {
                                test:       /\.js$/,
                                exclude:    /node_modules/,
                                use: {
                                        loader: "babel-loader"
                                }
                            }, 
                            {
                                test: /\.s?css$/,
                                use: ExtractTextPlugin.extract({
                                    fallback: 'style-loader',
                                        use: ['css-loader', 'sass-loader']
                                })
                            }, 
                            {
                                test: /\.(png|gif|jpe|jpg|woff|woff2|eot|ttf|svg)(\?.*$|$)/,
                                use: [{
                                    loader: 'url-loader',
                                    options: {
                                      limit: 100000
                                    }
                                }]
                            }
                ]
    },
    plugins: [
                new ExtractTextPlugin({
                    filename: '../css/main-style.css' 
                }), 
                new HtmlWebpackPlugin({
                    inject: false,
                    hash: true,
                    template: './public/index.php',
                    filename: 'index.php'
                })
    ],
    devServer: {
                    port:           3000,
                    contentBase:    __dirname + '/public/js', 
                    inline:         true
    }

};

如何从另一个文件夹加载模块？

Answer 1

您必须像这样导入jquery： import $ from 'assets/node_modules/jquery';

您还可以改善Webpack：

const path              = require('path');
const ExtractTextPlugin = require('extract-text-webpack-plugin');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const UrlLoader         = require('url-loader');


publicFolder = path.resolve(__dirname, 'public');
appFolder = path.resolve(__dirname, 'app');

module.exports = {

    resolve: {
        modules: [ publicFolder, appFolder ],
        extensions: [ '.js', ],
    },

    entry: { 
                main: './public/es/index.js' 
    },
    output: {
                path:       path.resolve(__dirname, 'public/js/'),
                filename:   'bundle.js'
    },
    module: {
                rules: [
                            {
                                test:       /\.js$/,
                                exclude:    /node_modules/,
                                use: {
                                        loader: "babel-loader"
                                }
                            }, 
                            {
                                test: /\.s?css$/,
                                use: ExtractTextPlugin.extract({
                                    fallback: 'style-loader',
                                        use: ['css-loader', 'sass-loader']
                                })
                            }, 
                            {
                                test: /\.(png|gif|jpe|jpg|woff|woff2|eot|ttf|svg)(\?.*$|$)/,
                                use: [{
                                    loader: 'url-loader',
                                    options: {
                                      limit: 100000
                                    }
                                }]
                            }
                ]
    },
    plugins: [
                new ExtractTextPlugin({
                    filename: '../css/main-style.css' 
                }), 
                new HtmlWebpackPlugin({
                    inject: false,
                    hash: true,
                    template: './public/index.php',
                    filename: 'index.php'
                })
    ],
    devServer: {
                    port:           3000,
                    contentBase:    __dirname + '/public/js', 
                    inline:         true
    }

};

我添加了

publicFolder = path.resolve(__dirname, 'public');
appFolder = path.resolve(__dirname, 'app');

和

resolve: {
    modules: [ publicFolder, appFolder ],
    extensions: [ '.js', ],
},

之后，您可以从publicFolder，appFolder导入任何东西，就像从node_modules中导入一样。例如

import {$,jQuery} from 'assets/node_models/jquery';

如何从其他`/ node_modules /`文件夹导入模块

1 个答案: