本文整理汇总了TypeScript中extract-text-webpack-plugin.extract函数的典型用法代码示例。如果您正苦于以下问题：TypeScript extract函数的具体用法？TypeScript extract怎么用？TypeScript extract使用的例子？那么, 这里精选的函数代码示例或许可以为您提供帮助。
在下文中一共展示了extract函数的10个代码示例，这些例子默认根据受欢迎程度排序。您可以为喜欢或者感觉有用的代码点赞，您的评价将有助于系统推荐出更棒的TypeScript代码示例。
示例1:
cssLoaders.push(...baseRules.map(({test, loaders}) => ({
include: stylePaths, test, loaders: ExtractTextPlugin.extract({
remove: false,
loader: ['css-loader', ...commonLoaders, ...loaders],
fallbackLoader: 'style-loader'
})
})));示例2:
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;
}));示例3:
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: ''
})
})));示例4:
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: ''
})
})));示例5: getCSSConfig
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]')
]
}
};示例6:
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;
}));示例7: Loader
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);
}示例8: StyleLintPlugin
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({示例9: ExtractTextPlugin
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(),
//.........这里部分代码省略.........
示例10: default
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',
//.........这里部分代码省略.........