手把手教你用webpack3搭建react項目(開發環境和生產環境)(一)
開發環境和生產環境整個配置源碼在github上，源碼地址：github-webpack-react 如果覺得有幫助，點個Star謝謝！！
(一)是開發環境，(二)是生產環境。
一、首先創建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
接下來開始配置一個完整項目需要配置的各項。先貼出我的項目目錄
二、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, //實時刷新
proxy:{ //代理屬性
"/api":{
target:‘http://localhost:9000/‘,
pathRewrite: {"^/api":""}
/* 因為在 ajax 的 url 中加了前綴 ‘/api‘，而原本的接口是沒有這個前綴的
所以需要通過 pathRewrite 來重寫地址，將前綴 ‘/api‘ 轉為 ‘‘ */
}
}
}
}
三、配置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
四、配置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樣式添加瀏覽器兼容
五、配置圖片和字體圖標
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配置字體圖標和打包相關問題
六、最後一步使用插件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配置字體圖標和打包相關問題
webpack中hash與chunkhash區別和需要註意的問題
手把手教你用webpack3搭建react項目(開發環境和生產環境)(一)