webpack2 項目構建一

最近工做忙，學習被暫停了，仍是網上多看看資料，多學習學習一下，看到一些好的資料，本身想整理一下，這不，webpack2項目構建都尚未弄懂，webpack3就已經發布了，說實話週末如今真不想看書和研究東西，拿着手機玩玩遊戲，看看電視真爽，可是IT行業沒有辦法，技術在不斷的更新，不學習安慰安慰一下本身，內心過不去，萬一過1-2年被淘汰了，找份工做都不容易，所以仍是多學習學習下，資料多整理一下，剛看完，阮一峯老師寫的 45歲之後的人生 

說實話，感慨確定有，不要說45歲之後，就說30來歲，如今週末都不想去折騰技術，因此IT行業會爲之後擔心的，好了先不說了；

項目的目錄結構以下：

### 目錄結構以下：
demo                                        # 工程名
|   |--- dist                               # 打包後生成的目錄文件             
|   |--- node_modules                       # 全部的依賴包
|   |--- src                                # 項目的文件包
|   |    |--- common
|   |    |     |---css                      # 公用頁面的css文件
|   |    |     |---js                       # 公用頁面的js文件
|   |---
|   |--- .babelrc                           # 支持es6      
|   |--- .gitignore  
|   |--- README.md
|   |--- index.html                         # 首頁入口文件
|   |--- package.json                      
|   |--- webpack.config.js                  # 配置文件 
|   |--- webpack.production.config.js       # 上線打包配置文件

webpack 配置項以下代碼：

// 導入路徑包
const path = require('path'); 
const webpack = require('webpack');
const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {

    //開啓sourceMap便於調試
    devtool: 'eval-source-map', 

    //入口文件，
    entry: './src/main.js', 

    output: {
        // 輸出文件到當前目錄下的 build文件夾內
        path: path.resolve(__dirname, 'build'), 

        publicPath: '/assets/', //指定資源文件引用的目錄

        filename: 'bundle.js' // 指定打包爲一個文件 bundle.js
        // filename: '[name].js' // 能夠打包爲多個文件

    },
    // 使用loader模塊
    module: {
        /* 
         * 在webpack2.0版本已經將 module.loaders 改成 module.rules, 固然module.loaders也是支持的。
         * 同時鏈式loader(用!鏈接)只適用於module.loader，同時-loader不可省略 
         */
        rules: [
          {
            test: /\.css$/,
            use: [
              'style-loader', {
                loader: 'css-loader',
                options: {
                  // modules: true // 設置css模塊化,詳情參考 https://github.com/css-modules/css-modules
                }
              }, 
              {
                loader: 'postcss-loader',
                // 參考 https://github.com/postcss/postcss-loader
                options: {
                  plugins: function() {
                    return [
                      require('autoprefixer')
                    ];
                  }
                }
              }]
          }, 
          {
            test: /\.styl(us)?$/,
            use: [
                'style-loader', 'css-loader', {
                   loader: "postcss-loader",
                   options: {
                      plugins: function() {
                        return [
                          require('autoprefixer')
                        ];
                      }
                    }
                }, 'stylus-loader']
          }, 
          {
            test: /\.js$/,
            loader: 'babel-loader', 
            exclude: /node_modules/ //須要排除的目錄
          }
        ]
    },
    // 配置devServer各類參數
    devServer: {
        // contentBase: "./",   // 本地服務器所加載的頁面所在的目錄
        hot: true,              // 配置HMR以後能夠選擇開啓
        historyApiFallback: true, // 不跳轉
        inline: true // 實時刷新
    },
    plugins: [
        new HtmlWebpackPlugin({
            template: './index.html' // 模版文件
        }),
        new webpack.HotModuleReplacementPlugin() // 熱加載插件
    ]
}

package.json 打包配置以下：

"scripts": {
    "start": "webpack-dev-server",
    "build": "set NODE_ENV=production&&webpack --config ./webpack.production.config.js"
  },

在項目中 進入項目的根目錄後，運行 npm run start 便可運行項目；
在webpack2.0中使用 module.rules 來 代替以前的 module.loaders， 而且使用了 postcss-loader 插件，該插件的做用是：
用來對 .css文件進行處理，並添加在 style-loader 和 css-loader 以後，經過一個額外的 postcss方法來返回所須要使用的 PostCss插件，好比，代碼返回
require('autoprefixer') 的做用是 加載 Autoprefixer插件。那麼Autoprefixer插件的做用是爲 css中的屬性添加瀏覽器特定的前綴，由於一些css新屬性，
各個瀏覽器下並不支持，所以使用該插件就能夠作這些事情，好比在頁面的代碼以下：

h1 {
  display: flex;
}

那麼實際在頁面上，經過Autoprefixer插件會自動渲染爲：

h1 {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}

該插件就是解決瀏覽器前綴的問題，固然還有不少插件均可以往這個裏面加。
在webpack的配置文件中能夠對devServer 配置以下：

devServer: {
  // contentBase: "./",   // 本地服務器所加載的頁面所在的目錄
  hot: true,              // 配置HMR以後能夠選擇開啓
  historyApiFallback: true, // 不跳轉
  inline: true // 實時刷新
}

這時候咱們就能夠監聽入口文件的改變，好比目前項目中的入口文件是 main.js，那麼main.js及全部經過import進來的css和js文件進來的，只要有修改，都會
實時刷新，可是html文件修改不能實時刷新了，修改後須要咱們手動刷新了。如上配置 devServer的 "inline"選項會爲頁面添加 "熱加載"功能，"hot"功能
會開啓 "熱替換"，即首先從新加載組件改變的部分(不是從新加載整個頁面)，若是兩個參數都有的話，當資源改變時，webpack-dev-server將先嚐試 熱替換，
若是失敗則會從新加載整個頁面。 可是要實現熱加載的話，還須要在代碼中加入以下代碼：

plugins: [
  new webpack.HotModuleReplacementPlugin() // 熱加載插件
]

配置中 devtool: 'eval-source-map', 配置會生成map文件，便於調試代碼。

webpack2.0增長了對ES6模塊的支持，不須要任何配置，webpack只針對 import導入和export 導出 的模塊纔會被編譯爲ES5，若是想全部的打包文件被編譯成ES5的話，須要使用babel編譯器轉換，所以須要按照babel，而後在項目的根目錄文件下 添加 .babelrc文件便可；

{
  "presets": [
    ["es2015", {"modules": false}]
  ]
}

而且在webpack中須要添加loader，以下：

{
  test: /\.js$/,
  loader: 'babel-loader', 
  exclude: /node_modules/ //須要排除的目錄
}

git上代碼鏈接