webpack入門+react環境配置

02-01

小結放在前：這篇文章主要是為下一篇的react提前鋪好路，webpack是一個前端資源模塊化管理和打包工具，說白了就是方便我們管理自己的常用的一些代碼，比如你開發中用到sass以及jade同時用到es6，開發時你不可能改動某個地方就挨個命令去轉換在到瀏覽器去看效果，那樣效率是非常低的。所以webpack幫我們省去了那些多餘的步驟

webpack 基本安裝

開始前還是萬萬不能缺少的安裝：

npm install webpack -gn

安裝完接著是建個文件夾新建一個package.json依賴管理文件

npm init //運行後按提示填寫當然嫌麻煩就直接下一步下一步就好無傷大礙n

現在安裝我們的webpack

npm install webpack --save-dev n//--save-dev 的意思是將這個安裝過程記錄到我們的package.json依賴管理文件里n

完後新建一個文件並命名為webpack.config.js（如同我們的常規的 gulpfile.js、Gruntfile.js），就是一個配置項，告訴 webpack 它需要做什麼。

打開webpack.config.js引入webpack

var webpack = require(webpack);n

webpack 基本入門

webpack主要結構分三個：入口文件配置（entry）、入口文件輸出配置（output）、載入器配置（module）、其他配置（resolve）

入口文件配置

entry: {n index : ./src/main.jsn },n

入口文件輸出配置

//配置編譯成功後文件存放的位置noutput: {n path: dist/js, //編譯後文件所在的文件夾n filename: [name].js //根據入口文件名命名編譯後的文件名，編譯後文件還是叫main.jsn },n

載入器配置

module: {n //最關鍵的一塊配置，它告知 webpack 每一種文件都需要使用什麼載入器來處理n loaders: [n { test: /.css$/, loader: style-loader!css-loader },n { test: /.js$/, loader: jsx-loader?harmony },n { test: /.scss$/, loader: style!css!sass?sourceMap},n { test: /.(png|jpg)$/, loader: url-loader?limit=8192}n ]n },n

其他配置

resolve: {nn //自動擴展文件後綴名，意味著我們require模塊可以省略不寫後綴名n extensions: [, .js, .json, .scss]n n }n

ok！好記憶不如爛筆頭，現在我們來自己搭建一個react的開發環境吧！

先參考我的目錄結構

build存放編譯後的文件，development存放react代碼的文件夾，components存放react組件的文件夾，node_modules存放安裝的依賴

我們先要安裝一些項目依賴：

npm install --save-dev react react-domnnnpm install --save-dev babel-core babel-loader babel-preset-es2015 babel-preset-reactnnnpm install --save-dev style-loader css-loader sass-loader url-loadernnnpm install --save-dev webpack-dev-server n//自動刷新修改後的結果，在webpack.config.js中配置webpack-dev-server，n//在這裡需要修改下entry的路徑，給它加一個webpack/hot/dev-server，後文會提到n

要是安裝失敗那就分開一個個裝，還不行就用淘寶的cnpm裝，還不行就看看你的node和npm的環境變數等配置（親身體會T_T）

npm install cnpm -gn

行！接下來是文件的內容

webpack.config.js文件的配置如下：

main.js內容如下：

let React = require(react);nlet ReactDOM = require(react-dom);nlet AppComponent = require(./components/index.js);nReactDOM.render(<AppComponent />, document.getElementById(content));n

index.js內容如下：

var React = require(react);nvar ProductBox;nProductBox = React.createClass({n render: function () {n return (n <div className="productBox">n hello react&es2015&webpack!!!n </div>n );n }n});nnmodule.exports = ProductBox;n

index.html內容如下：

<!DOCTYPE html>n<html>n<head lang="en">n <meta charset="UTF-8">n <title>React Project</title>n</head>n<body>n<script src="http://localhost:8080/webpack-dev-server.js"></script>n<div id="content"></div>n<script src="./bundle.js"></script>n</body>n</html>n

將上面的文件寫好後並放到對應文件夾內運行命令npm run build dev，成功後瀏覽器訪問地址location:8080，就會顯示出對應界面

結果：

hello react&es2015&webpack!!!

webpack入門+react環境配置

webpack 基本安裝

webpack 基本入門

ok！好記憶不如爛筆頭，現在我們來自己搭建一個react的開發環境吧！

行！接下來是文件的內容

晚上寫可能有很多內容漏了沒解釋詳細，歡迎糾正！！！