使用extract-text-webpack-plugin插件,将css文件抽离出单独的文件插入到head标签里面

CommanderXL · CommanderXL · commit 52efa211c37e · 2016-10-25T17:50:13.000+08:00
diff --git a/dist/index.html b/dist/index.html
@@ -5,6 +5,7 @@
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no">
     <title>司机注册</title>
+    <link rel="stylesheet" href="style.css">
 </head>
 
 <body>
diff --git a/package.json b/package.json
@@ -25,6 +25,7 @@
     "css-loader": "^0.25.0",
     "eslint": "^3.8.1",
     "eslint-loader": "^1.6.0",
+    "extract-text-webpack-plugin": "^1.0.1",
     "html-loader": "^0.4.4",
     "json-loader": "^0.5.4",
     "less": "^2.7.1",
diff --git a/webpack.config.js b/webpack.config.js
@@ -1,5 +1,7 @@
 var path = require('path'),
-    DashboardPlugin = require('webpack-dashboard/plugin');
+    DashboardPlugin = require('webpack-dashboard/plugin'),
+    webpack = require('webpack'),
+    ExtractTextPlugin = require('extract-text-webpack-plugin');
 
 module.exports ={
     entry: path.join(__dirname, 'src/index.js'),
@@ -25,15 +27,15 @@ module.exports ={
             },
             {
                 test: /\.less$/,
-                loader: 'style!css!less'
+                loader: ExtractTextPlugin.extract('style', 'css!less')
             },
             {
                 test: /\.html$/,
                 loader: 'raw'
             },
             {
                 test: /\.css$/,
-                loader: 'style!css'
+                loader: ExtractTextPlugin.extract('style', 'css')
             },
             {
                 test: /\.json$/,
@@ -50,6 +52,7 @@ module.exports ={
         extensions: ['', '.js', '.less', '.html', '.json'],
     },
     plugins: [
-        new DashboardPlugin()
+        new DashboardPlugin(),
+        new ExtractTextPlugin('style.css')
     ]
 }

Original file line number	Diff line number	Diff line change
`@@ -1,5 +1,7 @@`
`1`	`1`	`var path = require('path'),`
`2`		`- DashboardPlugin = require('webpack-dashboard/plugin');`
	`2`	`+ DashboardPlugin = require('webpack-dashboard/plugin'),`
	`3`	`+ webpack = require('webpack'),`
	`4`	`+ ExtractTextPlugin = require('extract-text-webpack-plugin');`
`3`	`5`
`4`	`6`	`module.exports ={`
`5`	`7`	`entry: path.join(__dirname, 'src/index.js'),`
`@@ -25,15 +27,15 @@ module.exports ={`
`25`	`27`	`},`
`26`	`28`	`{`
`27`	`29`	`test: /\.less$/,`
`28`		`- loader: 'style!css!less'`
	`30`	`+ loader: ExtractTextPlugin.extract('style', 'css!less')`
`29`	`31`	`},`
`30`	`32`	`{`
`31`	`33`	`test: /\.html$/,`
`32`	`34`	`loader: 'raw'`
`33`	`35`	`},`
`34`	`36`	`{`
`35`	`37`	`test: /\.css$/,`
`36`		`- loader: 'style!css'`
	`38`	`+ loader: ExtractTextPlugin.extract('style', 'css')`
`37`	`39`	`},`
`38`	`40`	`{`
`39`	`41`	`test: /\.json$/,`
`@@ -50,6 +52,7 @@ module.exports ={`
`50`	`52`	`extensions: ['', '.js', '.less', '.html', '.json'],`
`51`	`53`	`},`
`52`	`54`	`plugins: [`
`53`		`- new DashboardPlugin()`
	`55`	`+ new DashboardPlugin(),`
	`56`	`+ new ExtractTextPlugin('style.css')`
`54`	`57`	`]`
`55`	`58`	`}`