修复无法导入css的问题, 添加打包加速, 添加css合并打包

PepperYan · Jul 21, 2017 · 4adc215 · 4adc215
1 parent 96ca1f0
commit 4adc215
Show file tree

Hide file tree

Showing 3 changed files with 89 additions and 49 deletions.
diff --git a/prototype/package.json b/prototype/package.json
@@ -55,6 +55,8 @@
     "karma-sourcemap-loader": "^0.3.6",
     "karma-webpack": "^1.7.0",
     "less-loader": "^2.2.2",
+    "style-loader": "^0.18.2",
+    "css-loader": "^0.28.4",
     "mocha": "^2.3.4",
     "webpack": "^3.2.0",
     "webpack-dev-server": "^2.5.1",

diff --git a/src/webpack/base.config.js b/src/webpack/base.config.js
@@ -14,23 +14,24 @@ function config(cwd,env){
   var less
   var css
   var scss
-  // if(env === 'production'){
-  //   less = {test: /\.less$/, loader:ExtractTextPlugin.extract({fallback:"style-loader",use:['css-loader', 'less-loader']})}
-  //   css = {test: /\.css$/, loader: ExtractTextPlugin.extract({fallback:"style-loader",use:'css-loader'})}
-  //   scss = {test: /\.scss$/, loader: ExtractTextPlugin.extract({fallback:"style-loader",use:['css-loader', 'sass-loader']})}
-  // }else{
-  //   less = {test: /\.less$/, use:[ 'style-loader','css-loader','less-loader']};
-  //   css = {test: /\.css$/, use:[ 'style-loader','css-loader']};
-  //   scss = {test: /\.scss$/, use:[ 'style-loader','css-loader','sass-loader']};
-  // }
+  if(env === 'production'){
+    less = {test: /\.less$/, loader:ExtractTextPlugin.extract({fallback:"style-loader",use:['css-loader', 'less-loader']})}
+    css = {test: /\.css$/, loader: ExtractTextPlugin.extract({fallback:"style-loader",use:'css-loader'})}
+    scss = {test: /\.scss$/, loader: ExtractTextPlugin.extract({fallback:"style-loader",use:['css-loader', 'sass-loader']})}
+  }else{
+    less = {test: /\.less$/, use:[ 'style-loader','css-loader','less-loader']};
+    css = {test: /\.css$/, use:[ 'style-loader','css-loader']};
+    scss = {test: /\.scss$/, use:[ 'style-loader','css-loader','sass-loader']};
+  }
+
 
-  less = {test: /\.less$/, use:[ 'style-loader','css-loader','less-loader']};
-  css = {test: /\.css$/, use:[ 'style-loader','css-loader']};
-  scss = {test: /\.scss$/, use:[ 'style-loader','css-loader','sass-loader']};
+  // less = {test: /\.less$/, use:[ 'style-loader','css-loader','less-loader']};
+  // css = {test: /\.css$/, use:[ 'style-loader','css-loader']};
+  // scss = {test: /\.scss$/, use:[ 'style-loader','css-loader','sass-loader']};
 
 
   return {
-    // cache:true,
+    cache:true,
     context: cwd,
     entry: {
     },
@@ -42,35 +43,44 @@ function config(cwd,env){
     },
     module: {
       rules: [
+        // 使用原生babel-loader
+        // {
+        //   test: /\.js[x]?$/,
+        //   loader: 'babel-loader?cacheDirectory=true&id=jsx',
+        //   exclude: /(node_modules|bower_components)/,
+        //   options: {
+        //     "presets": [
+        //       [
+        //         "es2015", {"modules":false }
+        //       ],
+        //       "stage-1",
+        //       "react"
+        //     ],
+        //     "plugins": [
+        //       "transform-decorators-legacy",
+        //       "transform-class-properties",
+        //       "transform-object-rest-spread",
+        //       "transform-decorators",
+        //       "transform-runtime",
+        //       "syntax-async-functions",
+        //       "transform-regenerator",
+        //       "transform-object-assign"
+        //     ],
+        //     "env": {
+        //       "development": {
+        //         "presets": ["react-hmre"]
+        //       }
+        //     }
+        //   }
+        // },
+
+        //替换happypack loader
         {
-          test: /\.jsx?$/,
-          loader: 'babel-loader?cacheDirectory=true',
+          test: /\.js[x]?$/,
+          loaders: [ 'happypack/loader?id=js' ],
           exclude: /(node_modules|bower_components)/,
-          options: {
-            "presets": [
-              [
-                "es2015", {"modules":false }
-              ],
-              "stage-1",
-              "react"
-            ],
-            "plugins": [
-              "transform-decorators-legacy",
-              "transform-class-properties",
-              "transform-object-rest-spread",
-              "transform-decorators",
-              "transform-runtime",
-              "syntax-async-functions",
-              "transform-regenerator",
-              "transform-object-assign"
-            ],
-            "env": {
-              "development": {
-                "presets": ["react-hmre"]
-              }
-            }
-          }
         },
+
         less,
         css,
         scss,
@@ -89,21 +99,49 @@ function config(cwd,env){
       }
     },
     plugins: [
+      new ExtractTextPlugin("[name].[hash].css"),
       new webpack.DefinePlugin({
         "process.env": {
           BROWSER: JSON.stringify(true),
           NODE_ENV: JSON.stringify( env || 'development' )
         }
       }),
       new webpack.NoEmitOnErrorsPlugin(),
-      // new webpack.ResolverPlugin(
-      //   new webpack.ResolverPlugin.DirectoryDescriptionFilePlugin("bower.json", ["main"])
-      // ),
-      // new HappyPack({
-      //   id: 'jsx',
-      //   threads: 13,
-      //   tempDir: `${cwd}/.happypack`,
-      // })
+
+      new HappyPack({
+        id:"js",
+        loaders:[
+          {
+            path:'babel-loader',
+            query:{
+              "presets": [
+                [
+                  "es2015", {"modules":false }
+                ],
+                "stage-1",
+                "react"
+              ],
+              "plugins": [
+                "transform-decorators-legacy",
+                "transform-class-properties",
+                "transform-object-rest-spread",
+                "transform-decorators",
+                "transform-runtime",
+                "syntax-async-functions",
+                "transform-regenerator",
+                "transform-object-assign"
+              ],
+              "env": {
+                "development": {
+                  "presets": ["react-hmre"]
+                }
+              },
+              cacheDirectory:true
+            }
+          }
+        ],
+        threads:13
+      })
     ]
   };
 }

diff --git a/src/webpack/webpack.prod.config.js b/src/webpack/webpack.prod.config.js
@@ -24,7 +24,7 @@ plugins.push(new webpack.LoaderOptionsPlugin({
   minimize: true,
   debug: false
 }))
-// plugins.push(new ExtractTextPlugin("[name].css"))
+plugins.push(new ExtractTextPlugin("[name].css"))
 // plugins.push(new UglifyJsPlugin({
 //   sourceMap: false
 // }));
@@ -40,7 +40,7 @@ var config = makeConfig({
   output: {
     path: `${cwd}/dist`,
     publicPath: './',
-    filename:'[name].js'
+    filename:'[name].[hash].js'
   },
 
   plugins: plugins