webpack 处理 css

Author: dunizb

BuildTools/webpack-loader-es6/dist/js/main-bundle.js

@@ -69,19 +69,28 @@
 
 "use strict";
 Object.defineProperty(__webpack_exports__, "__esModule", { value: true });
-/* harmony import */ var __WEBPACK_IMPORTED_MODULE_0__components_layer_layer_js__ = __webpack_require__(1);
+/* harmony import */ var __WEBPACK_IMPORTED_MODULE_0__css_common_css__ = __webpack_require__(1);
+/* harmony import */ var __WEBPACK_IMPORTED_MODULE_0__css_common_css___default = __webpack_require__.n(__WEBPACK_IMPORTED_MODULE_0__css_common_css__);
+/* harmony import */ var __WEBPACK_IMPORTED_MODULE_1__components_layer_layer_js__ = __webpack_require__(2);
+
 
 
 const App = function (){
     const NUM = 1;
     alert(NUM);
-    console.log(__WEBPACK_IMPORTED_MODULE_0__components_layer_layer_js__["a" /* default */]);
-}
+    console.log(__WEBPACK_IMPORTED_MODULE_1__components_layer_layer_js__["a" /* default */]);
+};
 
 new App();
 
 /***/ }),
 /* 1 */
+/***/ (function(module, exports) {
+
+throw new Error("Module parse failed: /Users/zhangbing/github/CodeTest/BuildTools/webpack-loader-es6/src/css/common.css Unexpected token (1:9)\nYou may need an appropriate loader to handle this file type.\n| html,body{\n|     padding: 0;\n|     margin: 0;");
+
+/***/ }),
+/* 2 */
 /***/ (function(module, __webpack_exports__, __webpack_require__) {
 
 "use strict";
@@ -90,7 +99,7 @@ new App();
 function layer(){
     return {
         name: 'layer',
-        tpl: tpl
+        // tpl: tpl
     };
 }
 

BuildTools/webpack-loader-es6/package.json

@@ -10,8 +10,13 @@
   "author": "",
   "license": "ISC",
   "devDependencies": {
+    "autoprefixer": "^7.1.2",
     "babel-preset-latest": "^6.24.1",
+    "css-loader": "^0.28.5",
+    "extract-text-webpack-plugin": "^3.0.0",
     "html-webpack-plugin": "^2.30.1",
+    "postcss-loader": "^2.0.6",
+    "style-loader": "^0.18.2",
     "webpack": "^3.5.5"
   }
 }

BuildTools/webpack-loader-es6/src/app.js

@@ -1,9 +1,10 @@
-import layer from './components/layer/layer.js'
+import './css/common.css';
+import layer from './components/layer/layer.js';
 
 const App = function (){
     const NUM = 1;
     alert(NUM);
     console.log(layer);
-}
+};
 
 new App();

BuildTools/webpack-loader-es6/src/components/layer/layer.js

@@ -3,7 +3,7 @@
 function layer(){
     return {
         name: 'layer',
-        tpl: tpl
+        // tpl: tpl
     };
 }
 

BuildTools/webpack-loader-es6/src/css/common.css

@@ -0,0 +1,11 @@
+html,body{
+    padding: 0;
+    margin: 0;
+    background-color: red;
+}
+
+ul,li{
+    list-style: none;
+    padding: 0;
+    margin: 0;
+}

BuildTools/webpack-loader-es6/webpack.config.js

@@ -1,8 +1,10 @@
 //https://www.npmjs.com/package/html-webpack-plugin
 var htmlWebpackPlugin = require('html-webpack-plugin');
+var loaderOptionsPlugin = require('loader-options-plugin');
 var path = require('path');
 
 module.exports = {
+    context: __dirname,//上下文
     entry: './src/app.js',
     output: {
         path: __dirname+'/dist',
@@ -19,9 +21,18 @@ module.exports = {
                 query:{
                     presets: ['latest'] //也可以在package.js中配置或者.baelrtc中配置
                 }
+            },
+            {
+                test: '/\.css$/', 
+                loader: 'style-loader!css-loader?importLoaders=1!postcss-loader',
             }
         ]
     },
+    postcss: [
+        require('autoprefixer')({
+            broswers: ['last 5 version']
+        })
+    ],
     plugins:[
         new htmlWebpackPlugin({
             filename: "index.html",