TypeScript extract-text-webpack-plugin.extract函数代码示例

 cssLoaders.push(...baseRules.map(({test, loaders}) => ({
   include: stylePaths, test, loaders: ExtractTextPlugin.extract({
     remove: false,
     loader: ['css-loader', ...commonLoaders, ...loaders],
     fallbackLoader: 'style-loader'
   })
 })));

    rules.push(...baseRules.map(({test, use}) => {
      const extractTextPlugin = {
        use: [
          ...commonLoaders,
          {
            loader: 'postcss-loader',
            options: {
              ident: buildOptions.extractCss ? 'extracted' : 'embedded',
              plugins: postcssPluginCreator,
              sourceMap: cssSourceMap
            }
          },
          ...(use as webpack.Loader[])
        ],
        // publicPath needed as a workaround https://github.com/angular/angular-cli/issues/4035
        publicPath: ''
      };
      const ret: any = {
        include: globalStylePaths,
        test,
        use: buildOptions.extractCss ? ExtractTextPlugin.extract(extractTextPlugin)
                                     : ['style-loader', ...extractTextPlugin.use]
      };
      // Save the original options as arguments for eject.
      if (buildOptions.extractCss) {
        ret[pluginArgs] = extractTextPlugin;
      }
      return ret;
    }));

 rules.push(...baseRules.map(({test, loaders}) => ({
   include: globalStylePaths, test, loaders: ExtractTextPlugin.extract({
     remove: false,
     loader: ['css-loader', ...commonLoaders, ...loaders],
     fallbackLoader: 'style-loader',
     // publicPath needed as a workaround https://github.com/angular/angular-cli/issues/4035
     publicPath: ''
   })
 })));

 rules.push(...baseRules.map(({test, loaders}) => ({
   include: globalStylePaths, test, loaders: ExtractTextPlugin.extract({
     use: [
       // css-loader doesn't support webpack.LoaderOptionsPlugin properly,
       // so we need to add options in its query
       `css-loader?${JSON.stringify({ sourceMap: cssSourceMap })}`,
       ...commonLoaders,
       ...loaders
     ],
     fallback: 'style-loader',
     // publicPath needed as a workaround https://github.com/angular/angular-cli/issues/4035
     publicPath: ''
   })
 })));

export function getCSSConfig() {
  const projectRoot: string = process.env.PWD;
  const styles = config.getJSON().apps.map(app => app.styles);
  let entries = {};

  styles.forEach(style => {
    for (let src in style) {
      if (helper.existsSync(path.resolve(projectRoot, src))) {
        entries[style[src].output] = path.resolve(projectRoot, `./${src}`);
      }
    }
  });

  return {
    name: 'styles',
    context: process.env.CLI_ROOT,
    resolve: {
      root: path.resolve(projectRoot)
    },
    entry: entries,
    output: {
      path: path.join(projectRoot, './build'),
      filename: '[name]'
    },
    module: {
      loaders: [
        { test: /\.css$/i, loader: ExtractTextPlugin.extract(['css-loader']) },
        { test: /\.sass$|\.scss$/i, loader: ExtractTextPlugin.extract(['css-loader', 'sass-loader']) },
        { test: /\.less$/i, loader: ExtractTextPlugin.extract(['css-loader', 'less-loader']) },
        { test: /\.styl$/i, loader: ExtractTextPlugin.extract(['css-loader', 'stylus-loader']) }
      ]
    },
    plugins: [
      new ExtractTextPlugin('[name]')
    ]
  }
};

 rules.push(...baseRules.map(({test, loaders}) => {
   const extractTextPlugin = {
     use: [
       ...commonLoaders,
       ...loaders
     ],
     fallback: 'style-loader',
     // publicPath needed as a workaround https://github.com/angular/angular-cli/issues/4035
     publicPath: ''
   };
   const ret: any = {
     include: globalStylePaths, test, loaders: ExtractTextPlugin.extract(extractTextPlugin)
   };
   // Save the original options as arguments for eject.
   ret[pluginArgs] = extractTextPlugin;
   return ret;
 }));

export default function StyleLoader
	( name:string
	, extensions:string[]
	, specificStyleLoader:string|any[]
	, o:WPACK.Loader
	)
	{ 

		const isDev = !o.isProd;

		const loadersArray = 
			[  isDev && 'style-loader'
			, ...stylesLoaders
			, specificStyleLoader
			].filter(Boolean);

		const loaders = o.isServer ? 
			'ignore-loader' :
			isDev ? 
				loadersArray : 
				ExtractTextPlugin.extract('style-loader',combineLoaders(loadersArray)) 

		return Loader(name,'style',extensions,loaders,o);
	}

     enforce: 'pre',
     test: /\.ts$/,
     loader: 'tslint-loader?emitErrors=true&failOnHint=true',
     exclude: /node_modules/
   }, {
     enforce: 'pre',
     test: /ng\-bootstrap\/util\/positioning/,
     loader: 'source-map-loader'
   }, {
     test: /\.ts$/,
     loader: 'awesome-typescript-loader?module=es2015',
     exclude: /node_modules/
   }, {
     test: /\.scss/,
     loader: ExtractTextPlugin.extract({
       fallbackLoader: 'style-loader',
       loader: 'css-loader!postcss-loader!sass-loader'
     }),
     exclude: /node_modules/
   }]
 },
 resolve: {
   extensions: ['.ts', '.js']
 },
 plugins: [
   new StyleLintPlugin({
     syntax: 'scss',
     context: 'scss',
     failOnError: true
   }),
   new ExtractTextPlugin('./../css/angular-calendar.css'),
   new webpack.SourceMapDevToolPlugin({

module.exports = (env: env = {}) => {
  console.log({ env });
  const isBuild = !!env.build;
  const isDev = !env.build;
  const isSourceMap = !!env.sourceMap || isDev;

  return {
    cache: true,
    devtool: isDev ? 'eval-source-map' : 'source-map',
    devServer: DEV_SERVER,

    context: PATHS.root,

    entry: {
      app: [
        // 'react-hot-loader/patch',
        './src/index.tsx',
      ],
    },
    output: {
      path: PATHS.build,
      filename: isDev ? '[name].js' : '[name].[hash].js',
      publicPath: '/',
    },

    resolve: {
      extensions: ['.ts', '.tsx', '.js', '.jsx', '.json'],
      modules: ['src', 'node_modules'],
    },
    
    module: {
      rules: [
        {
          test: /\.tsx?$/,
          include: PATHS.src,
          loader: (env.awesome ?
              [
                {
                  loader: 'awesome-typescript-loader',
                  options: {
                    transpileOnly: true,
                    useTranspileModule: false,
                    sourceMap: isSourceMap,
                  },
                },
              ] : [
                {
                  loader: 'ts-loader',
                  options: {
                    transpileOnly: true,
                    compilerOptions: {
                      'sourceMap': isSourceMap,
                      'target': isDev ? 'es2015' : 'es5',
                      'isolatedModules': true,
                      'noEmitOnError': false,
                    },
                  },
                },
              ]
          ),
        },
        {
          test: /\.js$/,
          exclude: /(node_modules|bower_components)/,
          use: {
            loader: 'babel-loader',
            options: {
              presets: ['env']
            }
          }
        },
        {
          test: /\.json$/,
          include: [PATHS.src],
          loader: { loader: 'json-loader' },
        },
        {
          test: /\.css$/,
          loader: ExtractTextPlugin.extract({
            use: 'css-loader'
          })
        },
        {
          test: /\.scss$/,
          loader: ExtractTextPlugin.extract({
            fallback: "style-loader",
            use: "css-loader!sass-loader",
          }),
        },
        {
          test: /\.(jpe?g|png|gif|svg|ico)$/i,
          loaders: [
            'file-loader?hash=sha512&limit=1000&digest=hex&name=[hash].[ext]',
            'image-webpack-loader?bypassOnDebug&optipng.optimizationLevel=7&gifsicle.interlaced=false'
          ]
        }
      ],
    },
    plugins: [
      StyleLintPlugin(),
//.........这里部分代码省略.........

export default (env: { production?: boolean } = {}) => {
  const babelPlugins = env.production ? ['emotion', 'lodash'] : ['emotion']

  const babelLoader: webpack.Loader = {
    loader: 'babel-loader',
    options: {
      plugins: babelPlugins,
    },
  }

  const tsLoader: webpack.Loader = {
    loader: 'ts-loader',
    options: {
      compilerOptions: {
        module: 'esnext',
      },
      transpileOnly: true,
    },
  }

  const cssLoader: webpack.Loader = {
    loader: 'css-loader',
    options: {
      minimize: env.production,
    },
  }

  const sourceRule: webpack.Rule = {
    test: /\.tsx?$/,
    use: [babelLoader, tsLoader],
    include: [sourcePath],
  }

  const cssLoaderRule: webpack.Rule = {
    test: /\.css$/,
    use: ExtractTextPlugin.extract({
      use: [cssLoader],
      fallback: 'style-loader',
    }),
  }

  const baseConfig: webpack.Configuration = {
    entry: {
      app: resolve(sourcePath, 'main'),
    },
    output: {
      filename: 'js/[name].js',
      path: outputPath,
    },
    module: {
      rules: [sourceRule, cssLoaderRule],
    },
    plugins: [
      new HTMLPlugin({
        template: './index.html',
        chunksSortMode: 'dependency',
        inject: 'head',
      }),

      new ScriptExtHtmlPlugin({
        defaultAttribute: 'defer',
      }),

      new ExtractTextPlugin({
        filename: 'css/[name].css',
        disable: !env.production,
      }),

      new webpack.DefinePlugin({
        APP_NAME: JSON.stringify(meta.name),
        APP_VERSION: JSON.stringify(meta.version),
      }),

      new ForkTsCheckerWebpackPlugin({
        tslint: true,
      }),
    ],
    resolve: {
      extensions: ['.js', '.json', '.ts', '.tsx'],
    },
    devServer: {
      historyApiFallback: true,
    },
  }

  const devConfig: webpack.Configuration = {
    plugins: [new webpack.NamedModulesPlugin()],
    devtool: 'eval-source-map',
  }

  const prodConfig: webpack.Configuration = {
    plugins: [
      new CleanPlugin(['build'], { verbose: false }),

      new webpack.DefinePlugin({
        'process.env.NODE_ENV': '"production"',
      }),

      new webpack.optimize.CommonsChunkPlugin({
        name: 'lib',
//.........这里部分代码省略.........