手把手教你用webpack3搭建react項目(開發環境和生產環境)(一)

開發環境和生產環境整個配置源碼在github上，源碼地址：github-webpack-react 若是以爲有幫助，點個Star謝謝！！

(一)是開發環境，(二)是生產環境。

1、首先建立package.json而且安裝webpack和webpack-dev-server

//不用你書寫任何，直接幫你建立一個最簡單的package.json文件
npm init -y
//webpack必須，webpack-dev-server開啓服務熱加載作代理
npm install --save-dev webpack webpack-dev-server

只要下載的是工具類的，須要--save-dev，項目依賴的例如：react這些不須要寫--save-dev

接下來開始配置一個完整項目須要配置的各項。先貼出個人項目目錄

2、webpack的入口，出口和devserver的配置

var path = require('path');//node提供的一塊方法
var webpack = require('webpack');
var HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {

entry:'./src/index.jsx',                      //這是入口文件
output: {
     path: path.resolve(__dirname, 'dist'),   //打包後文件的輸出路徑
     filename: 'bundle.js',                   //輸出文件名字，開發環境直接把輸出名字固定
}，

　　devServer:{
　　　　contentBase:'./dist',   　　//指定服務開啓的位置，在dist文件夾中
　　　　historyApiFallback: true,  //不跳轉，在開發單頁應用時很是有用，它依賴於HTML5 history API，若是設置爲true，任意的 404 響應均可能須要被替代爲 index.html
　　　　inline: true,              //實時刷新
　　　　port:8000,                 //默認8080
　　　　proxy:{                    //代理屬性
　　　　　　"/api":{
　　　　　　target:'http://localhost:9000/',
　　　　　　pathRewrite: {"^/api":""}
　　　　　　/* 由於在 ajax 的 url 中加了前綴 '/api'，而本來的接口是沒有這個前綴的
　　　　　　因此須要經過 pathRewrite 來重寫地址，將前綴 '/api' 轉爲 '' */
　　　　　　}
　　　　}
　　}

}

3、配置js，es6和jsx的編譯

//js的loader加載器還有es6轉es5，若是react開發須要下載 babel-preset-react
npm install babel-core babel-loader babel-preset-env babel-preset-react --save-dev
//babel相關插件配置
npm install --save-dev babel-plugin-transform-runtime babel-preset-stage-0

配置以下:

 {
     test: /\.(js|jsx)$/,           //匹配全部的js和jsx
      exclude:/node_modules/,       //除了這個文件夾外
      use: {
          loader: "babel-loader"    //babel的相關配置在.babelrc文件裏
       }
  }

.babelrc文件的配置以下

{
  "presets": [
    "env",
    "react",
    "stage-0"
  ],
  "plugins": ["transform-runtime"]
}

想要跟深刻了解babel的配置的能夠查看此文章對英文版的翻譯鏈接地址：https://excaliburhan.com/post/babel-preset-and-plugins.html

4、配置css，sass，postcss和autoprefixer

//css的loader轉換器和style的loader轉換器
npm install --save-dev css-loader style-loader
//由於sass-loader依賴於node-sass，因此還要安裝node-sass,postcss-loader autoprefixer postcss 添加瀏覽器兼容
npm install --save-dev sass-loader node-sass postcss-loader autoprefixer postcss

配置以下所示

//配置css
 {
    test: /\.css$/,
    use: [ 
        'style-loader',
        {loader: 'css-loader'，,options: {importLoaders: 1}},
        {loader: 'postcss-loader',options:{ident:"postcss",plugins:[require("autoprefixer")("last 100 versions")]}}
       ]
 },
 //配置scss  執行順序是從右往走的這個順序是不能改變的
  {
     test: /\.scss$/,
     use: [ 
             'style-loader',
              {loader: 'css-loader',options: {importLoaders: 2}}, //css-loader後還須要2個loader
              {loader: 'postcss-loader',options:{ident:"postcss",plugins:[require("autoprefixer")("last 100 versions")]}},
              'sass-loader'
             ]
   }

關於postcss的配置詳情能夠查看個人另外一篇博客：webpack3中使用postcss-loader和autoprefixer給css3樣式添加瀏覽器兼容

5、配置圖片和字體圖標

npm install --save-dev url-loader

url-loader主要爲了解決圖片過多，http請求增長致使性能下降，他主要的原理是將引入的圖片編碼，生成dataURl。至關於把圖片數據翻譯成一串字符。再把這串字符打包到文件中，最終只須要引入這個文件就能訪問圖片了，官網描述url-loader封裝了file-loader（這個loader主要用戶把一個文件不任何處理知識轉移位置用），這就體現了url-loader的limit的參數的做用，具體工做步驟是1.文件大小小於limit參數，url-loader將會把文件轉爲DataURL；2.文件大小大於limit，url-loader會調用file-loader進行處理，參數也會直接傳給file-loader。所以咱們只須要安裝url-loader便可。

 配置以下

 //配置圖片
 {
     test:/\.(jpg|png|gif|jpeg|bmp)$/,
     use:{
           loader:'url-loader',
           options: {
                       limit: 8192    //限制圖片的大小
                    }
          }
  },
   //配置字體圖標
   {
      test:/\.(woff|woff2|svg|ttf|eot)$/,
      use:{
              loader:'url-loader',
              options: {
                        limit: 10000,  //開發環境下這裏足夠大就能夠，直接把字體圖標打包到文件裏，開發環境就須要單獨打包了下一節會講
                 }
           }
   },

 想了解具體的能夠看我寫的另外一篇文章：webpack3配置字體圖標和打包相關問題

6、最後一步使用插件html-webpack-plugin

npm install --save-dev html-webpack-plugin

 這個插件的做用就是用來生成html的，而且會自動幫你把打包後的靜態文件引入的html中。

配置以下

//會以我項目裏裏的inde.template.html爲模板，會在dist路徑下生成index.html並引用全部的靜態資源。項目輸出路徑爲dist。
new HtmlWebpackPlugin({
     template: __dirname + '/src/index.template.html' 

})　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　

 經過上邊的步驟開發環境下的配置已經配置好了我在package.json文件中添加了以下：

"scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "start": "webpack-dev-server --hot --colors --inline --open",  //直接執行npm start 項目就開啓了，默認打開的是webpack.config.js
    "build": "rimraf dist && webpack --config webpack.dev.js"      //npm run build 打包項目先刪除dist文件夾，而後在運行webpack.dev.js
  }

 如今直接npm start 項目就開啓了

開發環境和生產環境整個配置源碼在github上，源碼地址：github-webpack-react 若是以爲有幫助，點個Star謝謝！！

相關文章：

 

手把手教你用webpack3搭建react項目(開發環境和生產環境)(二)

webpack3中使用postcss-loader和autoprefixer給css3樣式添加瀏覽器兼容

webpack3配置字體圖標和打包相關問題

webpack中hash與chunkhash區別和須要注意的問題