Заказ WebPack JS с AngularJs, Jquery, Bootstrap - PullRequest
0 голосов
/ 04 апреля 2020

Я пытаюсь перенести свое решение с 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"
  }),
]

};

Я очень расстраиваюсь, потому что я не нахожу способа решить эту проблему.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...