如何使用webpack引入node_modules？

Question

如何使用webpack引入node_modules？

5

在我的AngularJS 1.3应用程序中，我之前使用的是Bower和Grunt，一切都很正常。我像以下截图一样在我的index.html中添加文件。但现在，我已经使用NPM安装了所有软件包，并使用WebPack 4.21.0进行打包和运行应用程序。但现在，如果我从Index.html文件中删除软件包链接，我的应用程序将停止工作。但我不想在Index.html中添加所有这些链接，只想从这些文件生成一个捆绑文件。请指导我如何实现这一点？目前，它只是在vendor.js中添加angular.js文件和一些其他文件。

Index.html

Package.json

webpack.config.js

更新的问题:

现在我正在使用以下webpack.config.js，但它创建了bootstrap_and_some_plugin.css.js。它应该创建css文件，但不知道为什么会创建js文件？

module.exports = {
  context: __dirname + '/app/scripts',
  resolve: {
    modules: ['bower_components', 'node_modules'],
    alias: {
      bower_components: __dirname + '/app/bower_components',
      assets: __dirname + '/app/assets'
    },
    extensions: ['.js', '.jsx', '.css']
  },
  module: {
    rules: [
      {
        test: /\.css$/,
        use: [
          { loader: "style-loader" },
          { loader: "css-loader" }
        ]
      },
      {
        test: /\.(woff(2)?|ttf|eot|svg)(\?v=\d+\.\d+\.\d+)?$/,
        use: [{
          loader: 'file-loader',
          options: {
            name: '[name].[ext]',
            outputPath: 'fonts/'
          }
        }]
      }
    ]
  },
  entry: {
    app: './main-app.js',
    'bootstrap_and_some_plugin.css': [
      'bower_components/font-awesome/css/font-awesome.css',
      'bower_components/seiyria-bootstrap-slider/dist/css/bootstrap-slider.min.css',
      'bower_components/angular-ui-tree/dist/angular-ui-tree.min.css',
    ]
  },
  output: {
    filename: '[name].js',
    path: __dirname + '/app/scripts',
    //chunkFilename: '[id].[chunkhash].js',
  },
  devServer: {
    contentBase: './app',
    host: 'localhost',
    port: '9000',
    inline: true,
    compress: true,
    proxy: {
      '/api/**': {
        //target: 'http://10.189.1.159:8080',
        target: 'http://localhost:9100',
        secure: false,
        changeOrigin: true,
        cookieDomainRewrite: true
      }
    },
    open: true
  },
  plugins: [

  ]
};

- Manjit

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Tân · Accepted Answer

在文件webpack.config.js中，在resolve属性内添加以下属性:

resolve: {
    alias: {
        bower_components: __dirname + '/app/bower_components'
    }
}

在main-app.js文件中，如果你想使用一些js文件，可以这样调用：

require('bower_components/jquery/dist/jquery.js');
require('bower_components/angular/angular.js');
require('bower_components/bootstrap/dist/js/bootstrap.js');
// ...

你需要指定webpack.config.js文件的路径。在我的例子中，所有路径看起来像：

your_project
    webpack.config.js
    app
        bower_components
            jquery
                ...
            angular
                ...
            bootstrap
                ...

__dirname 指的是使用它的 js 文件的当前路径。如果在 webpack.config.js 文件中使用 __dirname，它将呈现为 your_project。或者在 jquery.js 中使用它，它将呈现为your_project\app\bowser_components\jquery\dist。

然后，构建到 bundle.js 文件并删除 Index.cshtml 文件中的所有路径。

希望这有所帮助！

更新：如果您的 js 目标文件过大。您可以将模块分拆成多个部分，例如：

entry: {
    'bootstrap_and_some_plugin.css': [
        './app/bower_components/bootstrap/dist/css/bootstrap.min.css',
        './app/bower_components/some-plugin/css/some-plugin.css'
    ],
    'jquery_and_angular.js': [
        './app/bower_components/jquery/dist/jquery.js', 
        './app/bower_components/angular/angular.js'
    ],
    'site.js': ['./js/site']
}

然后，在你的Index.cshtml文件中：

<link href="bootstrap_and_some_plugin.css" rel="stylesheet" />

<!-- body content -->

<script src="jquery_and_angular.js"></script>
<script src="site.js"></script>

更新2: 您需要安装2个包babili-webpack-plugin和extract-text-webpack-plugin

在webpack.config.js文件中：

// define these variables before "module.exports"
var BabiliPlugin = require('babili-webpack-plugin');
var ExtractTextPlugin = require('extract-text-webpack-plugin');

module.exports = {...};

然后，设置插件选项：

plugins: [
    new BabiliPlugin({}, { test: /\.js$/, comments: false }),
    new ExtractTextPlugin('[name]'),
    ... and other options
]

以及输出选项：

output: {
    filename: '[name]',
    ... and other options
}