github/JavaScriptServices
1
1
Fork 0
mirror of https://github.com/aspnet/JavaScriptServices.git synced 2025-12-22 17:47:53 +00:00
Code Issues Packages Projects Releases Wiki Activity

Add '-loader' suffix to all Webpack loader references

Browse Source
This commit is contained in:
Scott Addie
2016-11-19 14:20:52 -06:00
committed by Steve Sanderson
parent bbbcb5ef18
commit 3a4936dbf7
17 changed files with 36 additions and 36 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
samples/misc/Webpack/webpack.config.dev.js
View File

@@ -2,7 +2,7 @@ module.exports = {
devtool: 'inline-source-map',
module: {
loaders: [
{ test: /\.less$/, loader: 'style!css!less' }
{ test: /\.less$/, loader: 'style-loader!css-loader!less-loader' }
]
}
};

2
samples/misc/Webpack/webpack.config.prod.js
View File

@@ -5,7 +5,7 @@ var extractLESS = new ExtractTextPlugin('my-styles.css');
module.exports = {
module: {
loaders: [
{ test: /\.less$/, loader: extractLESS.extract(['css', 'less']) },
{ test: /\.less$/, loader: extractLESS.extract(['css-loader', 'less-loader']) },
]
},
plugins: [

10
src/Microsoft.AspNetCore.SpaServices/README.md
View File

@@ -391,7 +391,7 @@ To make this work, the template has Webpack configured to inject the contents of
```javascript
// This goes into webpack.config.js, in the module loaders array:
{ test: /\.css/, include: /ClientApp/, loader: 'raw' }
{ test: /\.css/, include: /ClientApp/, loader: 'raw-loader' }
```
Now if you want to use LESS instead of plain CSS, you just need to include a LESS loader. Run the following in a command prompt at your project root:
@@ -403,10 +403,10 @@ npm install --save less-loader less
Next, add the following loader configuration to the `loaders` array in `webpack.config.js`:
```javascript
{ test: /\.less/, include: /ClientApp/, loader: 'raw!less' }
{ test: /\.less/, include: /ClientApp/, loader: 'raw-loader!less-loader' }
```
Notice how this chains together the `less` loader (which transforms `.less` syntax to plain CSS syntax), then the `raw` loader (which turn the result into a string literal). With this in place, you can reference `.less` files from your Angular 2 components in the obvious way:
Notice how this chains together with `less-loader` (which transforms `.less` syntax to plain CSS syntax), then the `raw` loader (which turn the result into a string literal). With this in place, you can reference `.less` files from your Angular 2 components in the obvious way:
```javascript
@Component({
@@ -447,7 +447,7 @@ npm install --save less-loader less
Finally, tell Webpack to use this whenever it encounters a `.less` file. In `webpack.config.js`, add to the `loaders` array:
```
{ test: /\.less/, loader: 'style!css!less' }
{ test: /\.less/, loader: 'style-loader!css-loader!less-loader' }
```
This means that when you `import` or `require` a `.less` file, it should pass it first to the LESS compiler to produce CSS, then the output goes to the CSS and Style loaders that know how to attach it dynamically to the page at runtime.
@@ -489,7 +489,7 @@ var extractStyles = new (require('extract-text-webpack-plugin'))('mystyles.css')
This creates a plugin instance that will output text to a file called `mystyles.css`. You can now compile `.less` files and emit the resulting CSS text into that file. To do so, add the following to the `loaders` array in your Webpack configuration:
```javascript
{ test: /\.less$/, loader: extractStyles.extract('css!less') }
{ test: /\.less$/, loader: extractStyles.extract('css-loader!less-loader') }
```
This tells Webpack that, whenever it finds a `.less` file, it should use the LESS loader to produce CSS, and then feed that CSS into the `extractStyles` object which you've already configured to write a file on disk called `mystyles.css`. Finally, for this to actually work, you need to include `extractStyles` in the list of active plugins. Just add that object to the `plugins` array in your Webpack config, e.g.:

8
templates/Angular2Spa/webpack.config.js
View File

@@ -15,10 +15,10 @@ var sharedConfig = {
},
module: {
loaders: [
{ test: /\.ts$/, include: /ClientApp/, loaders: ['ts?silent=true', 'angular2-template'] },
{ test: /\.html$/, loader: 'html' },
{ test: /\.css$/, loader: 'to-string!css' },
{ test: /\.(png|jpg|jpeg|gif|svg)$/, loader: 'url', query: { limit: 25000 } }
{ test: /\.ts$/, include: /ClientApp/, loaders: ['ts-loader?silent=true', 'angular2-template-loader'] },
{ test: /\.html$/, loader: 'html-loader' },
{ test: /\.css$/, loader: 'to-string-loader!css-loader' },
{ test: /\.(png|jpg|jpeg|gif|svg)$/, loader: 'url-loader', query: { limit: 25000 } }
]
}
};

2
templates/Angular2Spa/webpack.config.vendor.js
View File

@@ -11,7 +11,7 @@ module.exports = {
module: {
loaders: [
{ test: /\.(png|woff|woff2|eot|ttf|svg)(\?|$)/, loader: 'url-loader?limit=100000' },
{ test: /\.css(\?|$)/, loader: extractCSS.extract(['css']) }
{ test: /\.css(\?|$)/, loader: extractCSS.extract(['css-loader']) }
]
},
entry: {

6
templates/AureliaSpa/webpack.config.js
View File

@@ -14,9 +14,9 @@ module.exports = {
},
module: {
loaders: [
{ test: /\.ts$/, include: /ClientApp/, loader: 'ts', query: { silent: true } },
{ test: /\.html$/, loader: 'html' },
{ test: /\.css$/, loaders: [ 'style', 'css' ] },
{ test: /\.ts$/, include: /ClientApp/, loader: 'ts-loader', query: { silent: true } },
{ test: /\.html$/, loader: 'html-loader' },
{ test: /\.css$/, loaders: [ 'style-loader', 'css-loader' ] },
{ test: /\.(png|woff|woff2|eot|ttf|svg)$/, loader: 'url-loader?limit=100000' }
]
},

2
templates/AureliaSpa/webpack.config.vendor.js
View File

@@ -11,7 +11,7 @@ module.exports = {
module: {
loaders: [
{ test: /\.(png|woff|woff2|eot|ttf|svg)(\?|$)/, loader: 'url-loader?limit=100000' },
{ test: /\.css(\?|$)/, loader: extractCSS.extract(['css']) }
{ test: /\.css(\?|$)/, loader: extractCSS.extract(['css-loader']) }
]
},
entry: {

8
templates/KnockoutSpa/ClientApp/components/app-root/app-root.ts
View File

@@ -20,13 +20,13 @@ class AppRootViewModel {
this.route = this._router.currentRoute;
// Load and register all the KO components needed to handle the routes
// The optional 'bundle?lazy!' prefix is a Webpack feature that causes the referenced modules
// The optional 'bundle-loader?lazy!' prefix is a Webpack feature that causes the referenced modules
// to be split into separate files that are then loaded on demand.
// For docs, see https://github.com/webpack/bundle-loader
ko.components.register('nav-menu', navMenu);
ko.components.register('home-page', require('bundle?lazy!../home-page/home-page'));
ko.components.register('counter-example', require('bundle?lazy!../counter-example/counter-example'));
ko.components.register('fetch-data', require('bundle?lazy!../fetch-data/fetch-data'));
ko.components.register('home-page', require('bundle-loader?lazy!../home-page/home-page'));
ko.components.register('counter-example', require('bundle-loader?lazy!../counter-example/counter-example'));
ko.components.register('fetch-data', require('bundle-loader?lazy!../fetch-data/fetch-data'));
}
// To support hot module replacement, this method unregisters the router and KO components.

2
templates/KnockoutSpa/ClientApp/webpack-component-loader.ts
View File

@@ -2,7 +2,7 @@ import * as ko from 'knockout';
// This Knockout component loader integrates with Webpack's lazy-loaded bundle feature.
// Having this means you can optionally declare components as follows:
// ko.components.register('my-component', require('bundle?lazy!../some-path-to-a-js-or-ts-module'));
// ko.components.register('my-component', require('bundle-loader?lazy!../some-path-to-a-js-or-ts-module'));
// ... and then it will be loaded on demand instead of being loaded up front.
ko.components.loaders.unshift({
loadComponent: (name, componentConfig, callback) => {

8
templates/KnockoutSpa/webpack.config.js
View File

@@ -14,10 +14,10 @@ module.exports = {
},
module: {
loaders: [
{ test: /\.ts$/, include: /ClientApp/, loader: 'ts', query: { silent: true } },
{ test: /\.html$/, loader: 'raw' },
{ test: /\.css$/, loader: isDevBuild ? 'style!css' : ExtractTextPlugin.extract(['css']) },
{ test: /\.(png|jpg|jpeg|gif|svg)$/, loader: 'url', query: { limit: 25000 } }
{ test: /\.ts$/, include: /ClientApp/, loader: 'ts-loader', query: { silent: true } },
{ test: /\.html$/, loader: 'raw-loader' },
{ test: /\.css$/, loader: isDevBuild ? 'style-loader!css-loader' : ExtractTextPlugin.extract(['css-loader']) },
{ test: /\.(png|jpg|jpeg|gif|svg)$/, loader: 'url-loader', query: { limit: 25000 } }
]
},
plugins: [

2
templates/KnockoutSpa/webpack.config.vendor.js
View File

@@ -11,7 +11,7 @@ module.exports = {
module: {
loaders: [
{ test: /\.(png|woff|woff2|eot|ttf|svg)(\?|$)/, loader: 'url-loader?limit=100000' },
{ test: /\.css(\?|$)/, loader: extractCSS.extract(['css']) }
{ test: /\.css(\?|$)/, loader: extractCSS.extract(['css-loader']) }
]
},
entry: {

6
templates/ReactReduxSpa/webpack.config.js
View File

@@ -16,7 +16,7 @@ var sharedConfig = () => ({
module: {
loaders: [
{ test: /\.tsx?$/, include: /ClientApp/, loader: 'babel-loader' },
{ test: /\.tsx?$/, include: /ClientApp/, loader: 'ts', query: { silent: true } }
{ test: /\.tsx?$/, include: /ClientApp/, loader: 'ts-loader', query: { silent: true } }
]
}
});
@@ -27,8 +27,8 @@ var clientBundleConfig = merge(sharedConfig(), {
entry: { 'main-client': './ClientApp/boot-client.tsx' },
module: {
loaders: [
{ test: /\.css$/, loader: ExtractTextPlugin.extract(['css']) },
{ test: /\.(png|jpg|jpeg|gif|svg)$/, loader: 'url', query: { limit: 25000 } }
{ test: /\.css$/, loader: ExtractTextPlugin.extract(['css-loader']) },
{ test: /\.(png|jpg|jpeg|gif|svg)$/, loader: 'url-loader', query: { limit: 25000 } }
]
},
output: { path: path.join(__dirname, clientBundleOutputDir) },

2
templates/ReactReduxSpa/webpack.config.vendor.js
View File

@@ -11,7 +11,7 @@ module.exports = {
module: {
loaders: [
{ test: /\.(png|woff|woff2|eot|ttf|svg)(\?|$)/, loader: 'url-loader?limit=100000' },
{ test: /\.css(\?|$)/, loader: extractCSS.extract(['css']) }
{ test: /\.css(\?|$)/, loader: extractCSS.extract(['css-loader']) }
]
},
entry: {

6
templates/ReactSpa/webpack.config.js
View File

@@ -16,9 +16,9 @@ module.exports = {
module: {
loaders: [
{ test: /\.ts(x?)$/, include: /ClientApp/, loader: 'babel-loader' },
{ test: /\.tsx?$/, include: /ClientApp/, loader: 'ts', query: { silent: true } },
{ test: /\.css$/, loader: isDevBuild ? 'style!css' : ExtractTextPlugin.extract(['css']) },
{ test: /\.(png|jpg|jpeg|gif|svg)$/, loader: 'url', query: { limit: 25000 } }
{ test: /\.tsx?$/, include: /ClientApp/, loader: 'ts-loader', query: { silent: true } },
{ test: /\.css$/, loader: isDevBuild ? 'style-loader!css-loader' : ExtractTextPlugin.extract(['css-loader']) },
{ test: /\.(png|jpg|jpeg|gif|svg)$/, loader: 'url-loader', query: { limit: 25000 } }
]
},
plugins: [

2
templates/ReactSpa/webpack.config.vendor.js
View File

@@ -11,7 +11,7 @@ module.exports = {
module: {
loaders: [
{ test: /\.(png|woff|woff2|eot|ttf|svg)(\?|$)/, loader: 'url-loader?limit=100000' },
{ test: /\.css(\?|$)/, loader: extractCSS.extract(['css']) }
{ test: /\.css(\?|$)/, loader: extractCSS.extract(['css-loader']) }
]
},
entry: {

2
templates/WebApplicationBasic/webpack.config.js
View File

@@ -14,7 +14,7 @@ module.exports = merge({
module: {
loaders: [
{ test: /\.ts(x?)$/, include: /ClientApp/, loader: 'ts-loader?silent=true' },
{ test: /\.css/, loader: extractCSS.extract(['css']) }
{ test: /\.css/, loader: extractCSS.extract(['css-loader']) }
]
},
entry: {

2
templates/WebApplicationBasic/webpack.config.vendor.js
View File

@@ -11,7 +11,7 @@ module.exports = {
module: {
loaders: [
{ test: /\.(png|woff|woff2|eot|ttf|svg)$/, loader: 'url-loader?limit=100000' },
{ test: /\.css/, loader: extractCSS.extract(['css']) }
{ test: /\.css/, loader: extractCSS.extract(['css-loader']) }
]
},
entry: {