從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加載器。事情是這樣的：

{ 
    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`. 
}, 

所有的一切，我已經讀創建陣營應用的的WebPack配置在這裏學到了很多的WebPack https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/config/webpack.config.prod.js

Answer 2

捆綁引導：

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

的src /風格.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>