从Webpack 1.x迁移到Webpack 2.x的问题

Question

我最近尝试将我的应用程序从Webpack 1.x升级到2.x（Angular@4.1.3），并且在完成here和here的所有迁移更改后，我能够运行应用程序，但bootstrap完全被剥离。当我检查元素时，css类没有加载（没有显示在开发人员工具中）。装载机有问题吗？

webpack.common.js

const webpack = require('webpack');
const helpers = require('./helpers');
const ExtractTextPlugin = require("extract-text-webpack-plugin");

const CopyWebpackPlugin = require('copy-webpack-plugin');
const HtmlWebpackPlugin = require('html-webpack-plugin');

const METADATA = {
  title: 'App',
  baseUrl: '.'
};

var jQuery = require('jquery');

module.exports = {
  entry: {
    'polyfills': './src/polyfills.ts',
    'vendor': './src/vendor.ts',
    'main': './src/main.browser.ts'
  },

  externals: {
    "jQuery": "jQuery"
  },
  resolve: {

    alias: {
      jquery: "jquery/dist/jquery.min"
    },

    extensions: ['.ts', '.js'],

    modules: [
      helpers.root('src'),
      'node_modules'
    ]

  },

 module: {
    rules: [
      {
        test: /\.js$/,
        enforce: "pre",
        loader: 'source-map-loader',
        exclude: [
          helpers.root('node_modules/rxjs'),
          helpers.root('node_modules/primeng')
        ]
      },
      {
        test: /\.js$/,
        loader: 'babel-loader'
      },
      {
        test: /\.ts$/,
        loader: 'awesome-typescript-loader'
      },
      {
        test: /\.css$/,
        loader: 'raw-loader'
      },
      {
        test: /\.html$/,
        loader: 'raw-loader'
        // exclude: [helpers.root('src/index.html')]
      },
      {
        test: /\.scss$/,
        exclude: /node_modules/,
        use: [
                "raw-loader",
                 "sass-loader"
               ]
      },
      {
        test: /\.(woff|woff2|ttf|eot|svg)$/,
        loader: "url-loader",
          options: {
            limit: 10000
          }
      }
    ]
  },
  plugins: [
    new webpack.LoaderOptionsPlugin({
      options: {
        metadata: METADATA,
        tslint: {
          emitErrors: false,
          failOnHint: false,
          resourcePath: 'src'
        }
      }
    }),

    new webpack.ContextReplacementPlugin(
      /angular(\\|\/)core(\\|\/)@angular/,
      helpers.root('src'),
      {}
    ),

    new webpack.ProvidePlugin({
      "window.Tether": "tether",
      _: 'lodash',
      $: "jquery",
      jQuery: "jquery"
    }),

    new webpack.optimize.CommonsChunkPlugin({
      name: helpers.reverse(['polyfills', 'vendor'])
    }),

    new ExtractTextPlugin({
      filename: "node_modules/fullcalendar/dist/fullcalendar.min.css",
      allChunks: true
    }),

    new CopyWebpackPlugin(
      [
        {
          from: 'src/server-components',
          to: 'server-components'
        },
        {
          from: 'src/assets',
          to: 'assets'
        },
        {
          from: 'src/shared-files',
          to: 'shared-files'
        }
      ]
    ),
    new HtmlWebpackPlugin({
      template: 'src/index.html',
      chunksSortMode: helpers.packageSort(['polyfills', 'vendor', 'main'])
    })

  ],
  node: {
    global: true,
    crypto: 'empty',
    module: false,
    clearImmediate: false,
    setImmediate: false
  }

};

Answer 1

对于css文件，您需要css-loader。像这样：

{
  test: /\.css$/,
  loader: ExtractTextPlugin.extract(
      {
        fallback: 'style-loader',
        use: [
          {
            loader: 'css-loader',
            options: {
              importLoaders: 1,
            },
          },
          {
            loader: 'postcss-loader',
            options: {
              ident: 'postcss', // https://webpack.js.org/guides/migrating/#complex-options
              plugins: () => [
                autoprefixer({
                  browsers: [
                    '>1%',
                    'last 4 versions',
                    'Firefox ESR',
                    'not ie < 9', // React doesn't support IE8 anyway
                  ],
                }),
              ],
            },
          },
        ],
      }
  ),
  // Note: this won't work without `new ExtractTextPlugin()` in `plugins`.
},

总而言之，我通过阅读Create React App的webpack配置https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/config/webpack.config.prod.js

了解了很多关于webpack的知识。

Answer 2

捆绑引导程序：

1. create a src/styles.ts
2. within styles.ts import the bootstrap CSS stylesheet

src / styles.ts

import 'css!./bootstrap/dist/css/bootstrap.css';
import ... // other stylesheets

Webpack.config.js

    entry: {
      app: __dirname + '/src/main.ts',
      polyfills: __dirname + '/src/polyfills.ts',
      styles: __dirname + '/src/styles.ts'
    },
    output: {
      path: path.resolve(__dirname, 'dist'),
      filename: 'bundles/[hash]-[name].bundle.js',
      publicPath: '/'
    },

    module: {
        loaders: [
            { test: /\.css$/, loader: "style-loader!css-loader" }
        ]
    },
    plugins: [
        new CommonsChunkPlugin({
           names: [ "app", "polyfills", "styles"],
           minChunks: Infinity }),
        new HtmlWebpackPlugin({
           filename: __dirname + '/dist/index.html',
           template: __dirname + '/src/index.html'
        })
    ]

的index.html

<!DOCTYPE html>
<html>
  <head>
    <title>Angular Quickstart</title>
    <base href="/" />
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- Latest compiled and minified CSS -->
    ...

  </head>

  <body>
    <app>Loading...</app>
    <!-- webpack will auto insert JS and CSS links here -->
  </body>

</html>