使用webpack2.0 搭建react.js項目

最近一段時間沒有寫react.js,發現webpack已經徹底升級爲2.0了，升級後致使之前的項目不能正常編譯，只能從新實踐一番

關於webpack2.0和1.x的區別歸納起來就是tree shaking , es6, 一堆config文件不一樣的寫法

tree shaking，簡單描述就是就是真正意義上的按需打包，webpack1.0時代只要引入的包就打到合併的js文件中，即便是分包也沒法處理那些沒有使用的model,最後致使打包文件包括不少無用的內容，特別是SPA項目。

經過名叫 「tree-shaking」 的技術使打包的結果只包括實際用到的 exports。Three-shaking 的關鍵在於依賴 ES6 模塊的靜態結構。「靜態結構」意味着在編譯時他們是可分解的，而不用執行它們的任何代碼，簡單理解是ES6導出的部分若是在其它模塊沒有調用。

 

 

一.create項目

mkdir  project
type nul > package.json

　　

二.安裝webpack

npm install webpack --save-dev

 

三.安裝css相關的loader

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

 

四.爲了開發方便，安裝webpack-dev-server

npm install --save-dev webpack-dev-server

　　

五.爲了方便編譯，須要編譯ES6語法和react語法，由於本例使用redux官網的一個列子中的代碼，其中有地方用到stage0 stage2,全部還要引入這2個依賴

npm install --save-dev babel-core babel-loader babel-preset-es2015

npm install --save-dev babel-preset-react babel-preset-stage-0 babel-preset-stage-2

 

這裏注意的是.bable文件配置格式從1.0遷移到2.0後變化很大,主要是.babelrc配置格式不一樣了

1.0能夠這麼配置，2.0若是這麼配置將會報錯

{
  presets: ['es2015']
}

 

正確的配置 modules 表示是否轉行爲commonjs方式，這裏選擇false  loose 使編譯後的代碼不須要徹底遵循ES6規定, 簡化編譯後的代碼, 提升代碼執行效率，這裏能夠不使用這個模式

{
  "presets": [
    ["es2015", {"modules": false, "loose": true}],
     "stage-0",
    "stage-2",
    "react"
  ]
}

　

六 react相關

npm install --save-dev react react-dom react-redux redux

　　

　

七.其餘有用的依賴 

extract-text-webpack-plugin css分包用

html-webpack-plugin 文件js css引入替換模版用

npm install --save-dev path extract-text-webpack-plugin html-webpack-plugin

　

八.webpack文件

關於寫法問題，最大的就是使用roles use語法，可是發現babel-loader使用官網介紹的use時候，沒法編譯語法，有興趣的能夠研究下爲何？

module: {
  rules: [
    {
      test: /\.js$/,
      exclude: /(node_modules|bower_components)/,
      use: {
        loader: 'babel-loader',
        options: {
          presets: ['env']
        }
      }
    }
  ]
}　　

官網推薦的使用babel-preset-env這個庫，這個庫能夠制定編譯支持什麼瀏覽器，不過我使用後沒法識別一些前沿的語法，只能棄用

 

 最後找了個網上的用法，不使用use寫法，配置.babelrc文件的寫法。

 

開發環境

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

module.exports = {
    devtool: 'eval-source-map', //開啓sourceMap便於調試
    entry: './src/index.js', //入口文件
    output: {
        path: path.resolve(__dirname, 'build'), // 指定打包以後的文件夾
        filename: '[name].js' // 能夠打包爲多個文件
    },
    // 使用loader模塊
    module: {
        rules: [{
            test: /\.css$/,
            use: [
                'style-loader', {
                    loader: 'css-loader',
                    options: {
                        // modules: true // 設置css模塊化,詳情參考https://github.com/css-modules/css-modules
                    }
                }
            ]
        }, {
            test: /\.(jsx$|js)$/,
            loader: 'babel-loader', 
            exclude: /(node_modules|bower_components)/, //須要排除的目錄
            include: __dirname
        }]
    },
    // 配置devServer各類參數
    devServer: {
        hot: true, // 配置HMR以後能夠選擇開啓
        historyApiFallback: true, // 不跳轉
        inline: true // 實時刷新
    },
    plugins: [
        new HtmlWebpackPlugin({
            template: './index.html' // 模版文件
        }),
        new webpack.HotModuleReplacementPlugin() // 熱加載插件
    ]
}

　

 

生產環境　

const path = require('path'); // 導入路徑包
const webpack = require('webpack');
const HtmlWebpackPlugin = require('html-webpack-plugin');
var ExtractTextPlugin = require('extract-text-webpack-plugin');
var CleanPlugin = require('clean-webpack-plugin')//webpack插件，用於清除目錄文件


module.exports = {
    entry: './src/index.js', //入口文件
    output: {
        path: path.resolve(__dirname, 'build'), // 指定打包以後的文件夾
        filename: '[name]-[hash].js' // 能夠打包爲多個文件
    },
    // 使用loader模塊
    module: {
        rules: [{
            test: /\.css$/,
            use: [
                'style-loader', {
                    loader: 'css-loader',
                    options: {
                       
                    }
                }
            ]
        }, {
            test: /\.(jsx$|js)$/,
            loader: 'babel-loader', //此處不能用use，不知道爲啥
            exclude: /(node_modules|bower_components)/, //須要排除的目錄
            include: __dirname
        }]
    },
    plugins: [
        new HtmlWebpackPlugin({
            template: './index.html' // 模版文件
        }),
        new CleanPlugin(['build']),
        new webpack.optimize.CommonsChunkPlugin({
            name: 'vendors' // 將公共模塊提取，生成名爲`vendors`的chunk
        }),
        new webpack.optimize.UglifyJsPlugin({ //壓縮js代碼
            compress: {
                warnings: false
            }
        }),
        new ExtractTextPlugin('[name]-[hash].css'),
        //定義環境變量production,定義後就不不把提示的東西打包進去
        new webpack.DefinePlugin({
            'process.env': {NODE_ENV: '"production"'}
        })
    ]
}

　　

　

例子的地址，僅供學習https://github.com/xiashan17/SPA-REDUX