webpack入门+react环境配置
小結(jié)放在前：這篇文章主要是為下一篇的react提前鋪好路，webpack是一個(gè)前端資源模塊化管理和打包工具，說(shuō)白了就是方便我們管理自己的常用的一些代碼，比如你開發(fā)中用到sass以及jade同時(shí)用到es6，開發(fā)時(shí)你不可能改動(dòng)某個(gè)地方就挨個(gè)命令去轉(zhuǎn)換在到瀏覽器去看效果，那樣效率是非常低的。所以webpack幫我們省去了那些多余的步驟
webpack 基本安裝
開始前還是萬(wàn)萬(wàn)不能缺少的安裝：
npm?install?webpack?-g安裝完接著是建個(gè)文件夾新建一個(gè)package.json依賴管理文件
npm?init??//運(yùn)行后??按提示填寫???當(dāng)然嫌麻煩?就直接下一步??下一步就好??無(wú)傷大礙現(xiàn)在安裝我們的webpack
npm?install?webpack?--save-dev???//--save-dev?的意思是將這個(gè)安裝過(guò)程記錄到我們的package.json依賴管理文件里完后新建一個(gè)文件并命名為webpack.config.js（如同我們的常規(guī)的 gulpfile.js、Gruntfile.js），就是一個(gè)配置項(xiàng)，告訴 webpack 它需要做什么。
打開webpack.config.js引入webpack
var?webpack?=?require('webpack');webpack 基本入門
webpack主要結(jié)構(gòu)分三個(gè)：入口文件配置（entry）、入口文件輸出配置（output）、加載器配置（module）、其他配置（resolve）
入口文件配置
入口文件輸出配置
加載器配置
其他配置
ok！好記憶不如爛筆頭，現(xiàn)在我們來(lái)自己搭建一個(gè)react的開發(fā)環(huán)境吧！
先參考我的目錄結(jié)構(gòu)
build存放編譯后的文件，development存放react代碼的文件夾，components存放react組件的文件夾，node_modules存放安裝的依賴
我們先要安裝一些項(xiàng)目依賴：
npm?install?--save-dev?react?react-domnpm?install?--save-dev?babel-core?babel-loader??babel-preset-es2015?babel-preset-reactnpm?install?--save-dev?style-loader?css-loader?sass-loader?url-loadernpm?install?--save-dev?webpack-dev-server?//自動(dòng)刷新修改后的結(jié)果，在webpack.config.js中配置webpack-dev-server， //在這里需要修改下entry的路徑，給它加一個(gè)webpack/hot/dev-server，后文會(huì)提到要是安裝失敗那就分開一個(gè)個(gè)裝，還不行就用淘寶的cnpm裝 ，新航道雅思培訓(xùn)還不行就看看你的node和npm的環(huán)境變量等配置（親身體會(huì)T_T）
npm?install?cnpm?-g行！接下來(lái)是文件的內(nèi)容
webpack.config.js文件的配置如下：
var?path?=?require('path');var?webpack?=?require('webpack');??//加載webpack依賴包module.exports?=?{entry:?['webpack/hot/dev-server',?path.resolve(__dirname,?'./development/main.js')],??//入口文件并添加了熱加載output:?{path:?path.resolve(__dirname,?'./build'),filename:?'bundle.js'??//輸出文件},????module:?{loaders:?[{test:?/\.js?$/,exclude:?/(node_modules|bower_components)/,loader:?'babel',query:?{presets:?['es2015',?'react']}?//將react編譯成js文件},{?test:?/\.css$/,?loader:?'style-loader!css-loader'?},?//打包c(diǎn)ss文件{?test:?/\.scss$/,?loader:?'style!css!sass?sourceMap'},?//編譯sass文件{?test:?/\.(png|jpg)$/,?loader:?'url-loader?limit=8192'}?//對(duì)圖片進(jìn)行打包]},plugins:?[????????new?webpack.HotModuleReplacementPlugin()],resolve:?{????????//自動(dòng)擴(kuò)展文件后綴名extensions:?['',?'.js',?'.json',?'.scss',?'.ts']} };main.js內(nèi)容如下：
let?React?=?require('react');let?ReactDOM?=?require('react-dom');let?AppComponent?=?require('./components/index.js'); ReactDOM.render(<AppComponent?/>,?document.getElementById('content'));index.js內(nèi)容如下：
var?React?=?require('react');var?ProductBox; ProductBox?=?React.createClass({render:?function?()?{????????return?(????????????<div?className="productBox">hello?react&es2015&webpack!!!????????????</div>);} });module.exports?=?ProductBox;index.html內(nèi)容如下：
<!DOCTYPE?html><html><head?lang="en"><meta?charset="UTF-8"><title>React?Project</title></head><body><script?src="http://localhost:8080/webpack-dev-server.js"></script><div?id="content"></div><script?src="./bundle.js"></script></body></html>將上面的文件寫好后并放到對(duì)應(yīng)文件夾內(nèi)運(yùn)行命令npm run build dev，成功后瀏覽器訪問(wèn)地址location:8080，就會(huì)顯示出對(duì)應(yīng)界面
轉(zhuǎn)載于:https://blog.51cto.com/zhangtaoze/1913972
總結(jié)
以上是生活随笔為你收集整理的webpack入门+react环境配置的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。
- 上一篇： React学习（6）—— 高阶应用：非受
- 下一篇： Pig的安装和简单使用