webpack踩坑之路——構建基本的React+ES6項目

webpack是最近比較火的構建工具，搭配上一樣比較火的ReacJS與ES6(ES2015)必定是如今不少潮流 programmer 的追求。 廢話很少，下面就就看下如何從0搭起咱們的構建工具。

 

安裝

全局安裝webpack，若是安裝後仍是提示沒有webpack commond，能夠嘗試經過超級管理員身份安裝。

$ npm install webpack -g
$ sudo npm install webpack -g 

或者在項目裏進行安裝

$ npm install webpack --save-dev

 

配置

建立目錄

index.js文件內容：

document.write('Hello Webpack');

生成package.json文件，-y爲生成默認內容

$ npm init
$ npm init -y 

建立webpack.config.js文件

var webpack = require('webpack');

module.exports = {
    
    entry: './app/index.js', //入口

    output: { //輸出
        path: 'bundle', 
        publicPath: '/static/',
        filename: 'bundle.js'
    },

    module: { 
        loaders: [ //加載器
            {test: /\.css$/, loader: 'style-loader!css-loader' },
            {test: /\.js$/, loader: 'babel-loader'},
            {test: /\.(png|jpg)$/, loader: 'url-loader?limit=8192'}
        ]
    }

}

注意輸出中有一個path屬性和一個publicPath屬性，這兩者的區別在於path爲本地路徑，publicPath是你啓用服務器（webpack-dev-server/react-hot-loader）時的路徑。

在webpack中因此的資源都須要經過加載器加載，多個加載器之間用 ! 隔開，其中-loader的後綴是能夠省略的。

webpack.config文件中每一個申明的加載器都須要安裝，不然運行會報錯：

$ npm install style-loader css-loader --save-dev

鑑於一個項目中會有N多個loader，一般將這些loader寫入package.json文件的devDependencies屬性中，以後經過 $ npm install 命令一次所有安裝。

這裏選用 babel 加載器來加載咱們的JS文件，使用它最少須要安裝 babel-core 與 babel-loader。若是想用 babel 解析 ES6 和 React，還須要安裝上圖中的 babel-preset-es2015 和 babel-preset-react，這個後面再說。

 

運行

上述配置工做完成後咱們來啓動webpack

$ webpack

執行該命令後，項目下多了個 bundle 文件夾，裏面有輸出的 bundle.js 文件

在index.html中引入編譯過的bundle.js

<script src="../bundle/bundle.js"></script> 

運行index.html文件

這樣就完成了基本配置並跑起了第一個DEMO，看下其餘比較實用的命令

$ webpack --config xxx.js //使用另外一份config文件

$ webpack --watch //自動監聽打包

$ webpack -p //壓縮混淆腳本

$ webpack -d //生成map映射文件

初上手第二個和第三個命令比較經常使用，--watch 使得咱們不用每更改一次代碼就執行一次 $ webpack。-p會壓縮打包文件，使得體積減少不少，一般將壓縮後的文件發佈到線上。

webpack中，全部資源都是經過模塊化的方式引入的。其同時支持commonjs和AMD的語法。接下來咱們引入css文件。同時別忘記安裝 style-loader 與 css-loader。

style.css 內容

body {
    color: red;
}

index.js 內容

require('./style.css');
document.write('Hello Webpack');

結果

 

支持ES6

上文說過要支持ES6，還須要安裝babel-preset-2015。

$ npm install babel-preset-es2015

安裝好以後修改webpack.config文件以下：

{
    test: /\.js$/,
    loader: 'babel-loader', 
    query: { presets: ['es2015'] }
}

這裏咱們經過在app目錄下建立 app.js 文件：

let a = 'ES6 is working!';
export default a;

修改 index.js

import './style.css';
import text from './app.js';
alert(text);
document.write('Hello Webpack');

結果

 

支持ReactJS

首先安裝 react 與 babel-preset-react

$ npm install react react-dom babel-preset-react --save-dev

修改 webpack.config，在preset屬性中添加react一項。

{
    test: /\.js$/,
    loader: 'babel-loader', 
    query: {
        presets: ['es2015', 'react']
    }
}

修改 app.js 內容

import React, { Component } from 'react';

class App extends Component {
  render() {
    return (
      <h1>React is working!</h1>
    );
  }
}

export default App;

修改 index.js 內容

import './style.css';
import React from 'react';
import ReactDOM from 'react-dom';
import Title from './app.js';

ReactDOM.render(<Title />, document.body);

結果

這樣咱們就能夠在靜態項目裏同時使用ES6與React了，下面咱們看看若是經過本地服務器實現瀏覽器自動刷新。

若是你項目中並無用到React，你能夠經過webpack-dev-server來實現自動刷新。若是使用了React，可使用量身定作的React-hot-loader。

下面來依次說說兩者。

 

webpack-dev-server

安裝

npm install webpack-dev-server --save-dev

更改 index.html文件

<script src="static/bundle.js"></script>

此時的路徑就是 webpack.config 文件中 publickPath 中設置的

運行

webpack-dev-server
webpack-dev-server --port 3000

服務默認啓動8080端口，經過--port命令能夠更改端口。這樣咱們就能夠在localhost:3000/index.html訪問到咱們的頁面了。

熱刷新

webpack的熱刷新分爲iframe模式與inline模式

iframe模式操做要簡單許多，其並不須要更改配置，只須要訪問localhost:3000/webpack-dev-server/index.html。

如今當咱們更改 js 文件時瀏覽器就會自動刷新。

inline模式有興趣能夠去參考文檔。

 

react-hot-loader

安裝

npm install react-hot-loader --save-dev

更改 webpack.config 文件，並引入插件。

entry: [
　　'webpack-dev-server/client?http://localhost:2000',
　　'webpack/hot/only-dev-server',
　　'./js/index.js'
],
plugins: [
　　new webpack.HotModuleReplacementPlugin()
],
module: {
　　loaders: [{
　　　　test: /\.js$/,
　　　　loaders: ['babel', 'react-hot'],
　　}]
}

建立 server.js 文件

var webpack = require('webpack'),
    WebpackDevServer = require('webpack-dev-server'),
    config = require('./webpack.config');

new WebpackDevServer(webpack(config), {
　　publicPath: config.output.publicPath,
　　hot: true,
　　historyApiFallback: true
}).listen(3000, 'localhost', function (err, result) {
　　if (err) {
　　　　return console.log(err);
　　}
　　console.log('Listening at http://localhost:3000/');
});

使用命令啓動

node server.js

也能夠寫入 package.json 中

"scripts": {
　　"start": "node server.js"
}

運行

npm start

這樣React項目就能夠實現熱刷新了，不過在實際使用過程當中仍是會遇到各類坑。這裏引入個完整的官方DEMO，親測可用，文檔也很是簡潔明瞭。

https://github.com/gaearon/react-hot-boilerplate

 

感謝你的瀏覽，但願能爲你帶來幫助。