Я пытаюсь перенести свое решение с AngularJs на Angular и. NET на .NETCore. Мой первый шаг - перейти от Bundle ASP - NET к WebPack и JS к TS.
Для этого в моем решении у меня есть 2 папки app | \ .. все старые js контроллер, осветительный, компонентный, ...
src | \ .. с файлом TS
После этого разделения я добавляю команду webpack, чтобы скомпилировать мой TS в JS и сгенерировать свой пакет. js, и он отлично работает.
Поэтому я пытаюсь отключить все файлы JS из Bundle на ASP. NET Mvc, и у меня есть большая проблема: - Я смотрю в файл webpack и в режиме Dev у меня есть список в алфавитном порядке c на производство в смешанном порядке.
es. на mvc
'JSON2',
'jquery',
'jquery-ui',
'jquery-migrate',
'bootstrap',
'bootstrap-hover-dropdown',
Итак, я создал index.ts со вставкой всего импорта в точном порядке, который мне нужен (как описано выше), но веб-пакет не соблюдает правильный порядок и также не включает все файлы, но что-то.
это мой веб-пакет
const path = require('path');
const webpack = require('webpack');
const HtmlWebpackPlugin = require("html-webpack-plugin");
module.exports = {
// Enable recompile on the fly
//watch: true,
entry:{
ngApp: "./src/index.ts",
ng:[
'angular',
'angular-sanitize',
'angular-touch',
'angular-ui-router',
'angular-ui-grid',
'angular-moment',
'angular-file-upload',
]
// vendor: [
// 'JSON2',
// 'jquery',
// 'jquery-ui',
// 'jquery-migrate',
// 'bootstrap',
// 'bootstrap-hover-dropdown',
// 'jquery-slimscroll',
// "jquery-blockui",
// "js-cookie",
// "signalr",
// "localforage",
// "jquery-sparkline",
// "jquery-color",
// "jquery-jcrop",
// "timeago",
// "jstree",
// "bootstrap-switch",
// "jquery.spinner",
// "sweetalert",
// "push-js",
// "moment",
// "moment-timezone",
// "bootstrap-daterangepicker",
// "bootstrap-select",
// "underscore",
// "raphael",
// 'angular',
// 'angular-sanitize',
// 'angular-touch',
// 'angular-ui-router',
// 'angular-ui-grid',
// 'angular-moment',
// 'angular-file-upload',
// ]
},
//output: {
// filename: "../libs/app/bundle.js"
//},
output: {
path: path.resolve(__dirname, 'libs/app'),
filename: '[name].bundle.js',
chunkFilename:'[id].chunk.js'
},
devtool: "source-map",
resolve: {
// Add '.ts' and '.tsx' as a resolvable extension.
extensions: [".webpack.js", ".web.js", ".ts", ".tsx", ".js"]
},
optimization: {
splitChunks: {
chunks: 'all',
},
},
module: {
rules: [
// {
// test: require.resolve('bootstrap'),
// use: 'imports-loader?$=jquery',
// },
// {
// test: require.resolve('angular'),
// use: 'imports-loader?$=jquery',
// },
{
test: /\.tsx?$/,
exclude: [/node_modules/],
loader: "ts-loader",
//options: {
// configFile: "webpack_configs/tsconfig.webpack.json"
//}
},
{
test: require.resolve('jquery'),
use: [{
loader: 'expose-loader',
options: 'jQuery'
},
{
loader: 'expose-loader',
options: '$'
}
]
}
]
},
node:{
fs: "empty"
},
plugins: [
new webpack.ProvidePlugin({
$: "jquery",
"$": "jquery",
"jQuery": "jquery",
"jquery": "jquery",
jQuery: "jquery",
jquery: "jquery",
"window.jQuery": "jquery",
"window.$": "jquery"
}),
new HtmlWebpackPlugin({
template: "src/app/index.html"
}),
]
};
Я очень расстраиваюсь, потому что я не нахожу способа решить эту проблему.