在我的 angularJs 1.3 应用程序中,之前我使用的是 bower 和 grunt,它运行良好。我在 index.html 中添加文件,如下图所示。但是现在我已经使用 NPM 安装了所有包,并使用 WEBPack 4.21.0 来捆绑和运行应用程序。但是现在如果我从 Index.html 文件中删除包链接,我的应用程序将停止工作。但我不想要 Index.html 中的所有这些链接,只想从这些文件中生成一个捆绑文件。请指导我如何实现这一目标?目前,它只是在 vendor.js 中添加 angular.js 文件和一些其他文件。
索引.html
包.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: [
]
};
最佳答案
在文件webpack.config.js
,您在 resolve
中添加此属性属性(property):
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 文件的当前路径。如果您使用 __dirname
里面webpack.config.js
文件,它将呈现 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
}
关于angularjs - 如何使用 webpack 包含 node_modules?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/52987235/