WebPack 構(gòu)建環(huán)境頁面

初始化

 npm init
 npm i webpack -D

調(diào)試環(huán)境搭建

生成Source Maps

module.exports = {
  devtool: 'eval-source-map',
  entry:  __dirname + "/app/main.js",
  output: {
    path: __dirname + "/public",
    filename: "bundle.js"
  }
}

devtool配置如下：

本地調(diào)試服務(wù)器：

npm install -D webpack-cli
npm install --save-dev webpack-dev-server //構(gòu)建本地服務(wù)器

module.exports = {
  ...,
  devServer: {
    contentBase: "./public",//本地服務(wù)器所加載的頁面所在的目錄
    historyApiFallback: true,//不跳轉(zhuǎn)
    inline: true//實(shí)時(shí)刷新
  } 
}

Babel的安裝與配置

Babel其實(shí)是幾個(gè)模塊化的包，其核心功能位于稱為babel-core的npm包中称近，webpack可以把其不同的包整合在一起使用，對(duì)于每一個(gè)你需要的功能或拓展哮塞，你都需要安裝單獨(dú)的包（用得最多的是解析Es6的babel-env-preset包和解析JSX的babel-preset-react包）刨秆。

npm install --save-dev babel-core babel-loader babel-preset-env babel-preset-react

babel其實(shí)可以完全在 webpack.config.js 中進(jìn)行配置，但是考慮到babel具有非常多的配置選項(xiàng)忆畅，在單一的webpack.config.js文件中進(jìn)行配置往往使得這個(gè)文件顯得太復(fù)雜衡未，因此一些開發(fā)者支持把babel的配置選項(xiàng)放在一個(gè)單獨(dú)的名為 ".babelrc" 的配置文件中。我們現(xiàn)在的babel的配置并不算復(fù)雜家凯，不過之后我們會(huì)再加一些東西缓醋，因此現(xiàn)在我們就提取出相關(guān)部分，分兩個(gè)配置文件進(jìn)行配置（webpack會(huì)自動(dòng)調(diào)用.babelrc里的babel配置選項(xiàng)）绊诲，如下：

  
  ,{
    test: /(\.jsx|\.js)$/,
    use: {
        loader: "babel-loader"
    },
    exclude: /node_modules/
  },

//.babelrc
{
  "presets": ["react", "env"]
}

CSS

webpack提供兩個(gè)工具處理樣式表送粱，css-loader 和 style-loader，二者處理的任務(wù)不同驯镊，css-loader使你能夠使用類似@import 和 url(...)的方法實(shí)現(xiàn) require()的功能,style-loader將所有的計(jì)算后的樣式加入頁面中葫督，二者組合在一起使你能夠把樣式表嵌入webpack打包后的JS文件中。

npm install --save-dev style-loader css-loader

 module: {
        rules: [
          
            {
                test: /\.css$/,
                use: [
                    {
                        loader: "style-loader"
                    }, {
                        loader: "css-loader"
                    }
                ]
            }
        ]
    }

文件加載器

npm install --save-dev file-loader

+ {
+         test: /\.(png|svg|jpg|gif)$/,
+         use: [
+           'file-loader'
+         ]
+  }

字體同樣用該加載器
另外還有 url-loader

+       {
+         test: /\.(woff|woff2|eot|ttf|otf)$/,
+         use: [
+           'file-loader'
+         ]
+       }

CSS預(yù)處理器

Sass 和 Less 之類的預(yù)處理器是對(duì)原生CSS的拓展板惑，它們?cè)试S你使用類似于variables, nesting, mixins, inheritance等不存在于CSS中的特性來寫CSS，CSS預(yù)處理器可以這些特殊類型的語句轉(zhuǎn)化為瀏覽器可識(shí)別的CSS語句偎快，

npm install --save-dev postcss-loader autoprefixer