用webpack搭建本身的react腳手架

react-cli

前言：vue有 vue-cli,react也有 create-react-app。花了點時間本身用webpack實現配置react開發環境

demo地址

1、項目依賴

"dependencies": {
    "babel-polyfill": "^6.26.0",
    "react": "^16.2.0",
    "react-dom": "^16.2.0",
    "react-router-dom": "^4.2.2"
  },
  "devDependencies": {
    "babel-cli": "^6.26.0",
    "babel-core": "^6.26.0",
    "babel-loader": "^7.1.2",
    "babel-preset-es2015": "^6.24.1",
    "babel-preset-react": "^6.24.1",
    "clean-webpack-plugin": "^0.1.17",
    "css-loader": "^0.28.7",
    "express": "^4.16.2",
    "file-loader": "^1.1.6",
    "html-webpack-plugin": "^2.30.1",
    "node-sass": "^4.7.2",
    "react-hot-loader": "^3.1.3",
    "sass-loader": "^6.0.6",
    "style-loader": "^0.19.1",
    "uglifyjs-webpack-plugin": "^1.1.5",
    "webpack": "^3.10.0",
    "webpack-dev-middleware": "^2.0.3",
    "webpack-hot-middleware": "^2.21.0",
    "webpack-merge": "^4.1.1"
  }

2、初始化項目

npm init //會生成一個package.json

3、安裝依賴

react: ^16.2.0 react-dom: ^16.2.0 react-router-dom:^4.2.2

npm install react react-dom react-router-dom babel-polyfill --save  // babel-polyfill用來支持es6語法

4、開發過程當中的依賴

webpack: ^3.10.0

首先是webpack，其實主要就是webpack配置

npm install webpack --save-dev

先看例子吧

在根目錄下新建一個webpack.config.js,若是在命令行直接使用webpack(不指定參數)，默認就是打包這個文件,大體結構以下：

var path = require('path')
module.exports = {
  //入口
  entry:'./src/main.js'
  // 出口
  output: {
    publicPath: '/',
    path: path.resolve(__dirname, 'dist'),
    filename: 'bundle.js'
  },
  // 模塊解析
  module: {},
  // 插件
  plugins:[]
}

大體就是這樣，這是一個簡單的實例將src目錄下的main.js做爲入口打包進dist目錄下的bundle.js,而後在頁面引用這個js就能夠了

這是個簡單的例子，開發過程當中咱們還須要babel轉碼,熱更新，調試等,打包時成生產環境代碼還須要壓縮，分離第三方庫等功能。

接下來進行項目完善

npm install babel-cli babel-core babel-loader babel-preset-es2015 babel-preset-react --save-dev  //安裝react，es6轉碼過程當中須要的依賴

新建一個.babelrc文件

//babel的配置文件
{
    "presets": [
        [
            "es2015", 
            { "modules": false }
        ],
        "react"
    ],
    "plugins": ["react-hot-loader/babel"]
}

新建一個.gitignore文件

// 項目提交倉庫是忽略的一些代碼
.DS_Store
node_modules/
dist/
npm-debug.log*
yarn-debug.log*
yarn-error.log*
# Editor directories and files
.idea
*.suo
*.ntvs*
*.njsproj
*.sln

新建一個.editorconfig

//規範編碼風格
root = true
[*]
charset = utf-8
indent_style = space
indent_size = 2
end_of_line = lf
insert_final_newline = true
trim_trailing_whitespace = true

而後配置webpack，將開發環境和生產環境分開

先新建一個webpack.base.conf.js基礎文件

var path = require('path')
module.exports = {
  // 出口
  output: {
    publicPath: '/',
    path: path.resolve(__dirname, 'dist'),
    filename: '[name]-[hash].js'
  },
  // 模塊
  module: {
    rules: [{
      test: /(\.js|\.jsx)$/,
      exclude: /node_modules/,
      use: {
        loader: 'babel-loader',
        options: {
          presets: ['es2015', 'react']
        }
      }
    },
    {
      test: /\.css$/,
      use: ['style-loader','css-loader']
    },
    {
      test: /\.scss$/,
      use: ['style-loader','css-loader','sass-loader']
    },
    {
      test: /\.(png|svg|jpg|gif)$/,
      use: ['file-loader']
    },
    {
      test: /\.(woff|woff2|eot|ttf|otf)$/,
      use: ['file-loader']
    }]
  }
}

出口文件使用name+hash命名這樣每次修改代碼打包之後名字都會不同，而後引用須要的loader

npm install css-loader style-loader sass-loader node-loader file-loader react-hot-loader --save-dev

使用test匹配正則加載須要的loader，css預處理器使用的scss(scss能夠看作sass的升級),react-hot-loader是熱更新中須要用到的

而後新建webpack.dev.conf.js和webpack.prod.conf.js爲開發環境打包和生產環境打包，添加使用過程當中的依賴

npm install webpack-dev-middleware webpack-hot-middleware webpack-merge clean-webpack-plugin html-webpack-plugin uglifyjs-webpack-plugin express --save-dev

使用webpack-merge繼承webpack.base.conf.js中的配置，再單獨配置（詳細直接看代碼）
咱們將本身的代碼、第三方庫、轉碼用到的babel-polyfill分開打包，這樣再根據[name]-[hash].js打包出三個文件

在plugins中加入webpack.optimize.CommonsChunkPlugin()將第三方庫配置爲公共代碼（公共代碼加載頁面時會先引用）

加入HtmlWebpackPlugin配置，配置項目打包時引用的模板，咱們通常在根目錄下建議一個index.html的頁面

加入UglifyJsPlugin用來壓縮代碼

加入CleanWebpackPlugin配置，每次打包時先清空

配置HotModuleReplacementPlugin和NoEmitOnErrorsPlugin分別爲熱更新使用和打包出現錯誤不會退出

而後dev開發環境比prod生產環境配置的入口文件中多了兩行,是爲了開發環境中熱更新配置的

entry: {
    app: [
 +     'webpack-hot-middleware/client?reload=true', 
 +     'webpack/hot/only-dev-server', 
       './src/main.js'
    ],
    'babel-polyfill': 'babel-polyfill',
    vendors: ['react', 'react-dom', 'react-router-dom']
  }

接下來爲開發環境配置本地服務器，webpack有個webpack-dev-server，至關於webpack本身加的服務器,能夠本身去研究下，我開始沒用起來，仍是選擇了express

在build文件夾下新建一個dev.server.js文件，而後給開發環境配置服務器,引用webpack-dev-middleware和webpack-hot-middleware配置自動打包和自動刷新頁面,具體的在代碼中也有相應註釋，更多參數配置能夠看官方文檔

webpack中文文檔

而後直接說的在命令行中直接使用webpack打包的是webpack.config.js文件，如今咱們改寫了，就在package.json中配置一個

"scripts": {
    "test": "echo \"Error: no test specified\" && exit 1", 
+    "build": "webpack --config webpack.prod.conf.js",
+    "dev": "node build/dev-server.js"
  }

這樣在命令行中使用

npm run build //使用生產環境打包
npm run dev   //啓動開發環境調試,當代碼發生更改會自動刷新頁面

有問題歡迎交流 demo地址