webpack-react-hapi( webpack 1)

在學習中發現了一些好的文章，拿來學習一下，而且把在學習過程當中遇到的問題和想總結的 記錄在這裏。

http://www.jianshu.com/p/42e11515c10f

一 grunt 和 webpack的區別

（我想本身總結，等有所體會在修改這裏）

二 Source Maps

source-map	cheap-module-source-map	eval-source-map	cheap-module-eval-source-map
1. 會產生新的map文件 2. 報錯控制檯顯示 2.減慢打包速度（剛開始學習 體會不深）	1. 會產生新的map文件 2. 會顯示報錯的行數，不能對應到具體的列	1. 在打包編譯後的同一文件下 產生map（不影響構建速度的前提下生成完整的sourcemap） 2. 控制檯顯示 3.對打包後輸出的JS文件的執行具備性能和安全的隱患	1. 生成的Source Map 會和打包後的JavaScript文件同行顯示，沒有列映射 2. 控制檯顯示

 

 

 

 

 

 

 

 

 

 

三  不一樣模塊 css 命名不衝突（打包仍是仍是打在一塊兒）

　　1. webpack.config.js

　　　　

　　2. 在模塊js引入相應的css

　　3. 使用

 四 js css 分離

　　1. 安裝插件

　　const ExtractTextPlugin = require('extract-text-webpack-plugin');

　　2. module loader 使用

　　

{
                test: /\.css$/,
                use: ExtractTextPlugin.extract(
                    {
                        fallback: 'style-loader', 
                       // use:["css-loader","postcss-loader"]
                        use:[
                            {
                                loader: "css-loader",
                                options: {
                                    modules: true
                                }
                            },
                            {
                                loader: 'postcss-loader'//CSS的處理平臺
                            }
                        ],
                        
                    }                    
                    
                    )
            }

　　3. plugins 中使用（style.css 是最終打包後的樣式表）

　　new ExtractTextPlugin("style.css")

 

後續修改