webpack+es2015+react+Ant Design綱領(lǐng)

最近TWaver 3D機房項目打算使用Ant Design來重構(gòu)后端管理頁面，Ant Design 團隊不是很熟悉，webpack react等用的不多，所以自己花了一天時間，把相關(guān)知識點擼了一遍，給團隊做了個培訓。 下面主要是一個培訓的綱領(lǐng)，整個流程可以通暢的跑下來； 主要是webpack+es2015+react+Ant Design。 當然，ant design 自己有一套框架 打包平臺，有興趣的也可以研究。

官方文檔

參考webpack官方文檔，點擊一下鏈接
https://doc.webpack-china.org/guides/
https://doc.webpack-china.org/concepts/

安裝nodejs

忽略

安裝cnpm

npm 很多時候網(wǎng)絡(luò)不好使，所以使用cnpm更方便，如果cnpm安裝不了，可以翻墻安裝

npm install -g cnpm

安裝webpack

本地安裝

cnpm install --save-dev webpack 
cnpm install --save-dev webpack@<version>

全局安裝

cnpm install --global webpack

創(chuàng)建webpack項目

mkdir webpack-demo && cd webpack-demo 
cnpm init -y 
cnpm install --save-dev webpack

bundle 文件

一般代碼，直接在html文件中引入，js文件，比如下面的index.js

<html>
  <head>
    <title>Getting Started</title>
    <script src="https://unpkg.com/lodash@4.16.6"></script>
  </head>
  <body>
    <script src="./src/index.js"></script>
  </body>
</html>

使用webpack 后，在html引入一個bundle.js文件，然后通過webpack 會把所有的源代碼打包到bundle.js文件中。

  <html>
   <head>
     <title>Getting Started</title>
-    <script src="https://unpkg.com/lodash@4.16.6"></script>
   </head>
   <body>
-    <script src="./src/index.js"></script>
+    <script src="bundle.js"></script>
   </body>
  </html>

webpack配置文件

const path = require('path');  
module.exports = {   
  entry: './src/index.js',  
   output: {     filename: 'bundle.js',     path: path.resolve(__dirname, 'dist')   }};

入口Entiry

./src/index.js

輸出

  output: {     filename: 'bundle.js',     path: path.resolve(__dirname, 'dist')

使用import

不是用webpack的情況下，代碼在script標簽里面引入，此時可以直接使用

function component() {
  var element = document.createElement('div');

  // Lodash（目前通過一個 script 腳本引入）對于執(zhí)行這一行是必需的
  element.innerHTML = _.join(['Hello', 'webpack'], ' ');

  return element;
}

document.body.appendChild(component());

使用webpack之后，可以直接使用使用import語句引入在js文件中引入js文件

+ import _ from 'lodash';
+
  function component() {
    var element = document.createElement('div');

-   // Lodash, currently included via a script, is required for this line to work
+   // Lodash, now imported by this script
    element.innerHTML = _.join(['Hello', 'webpack'], ' ');

    return element;
  }
  document.body.appendChild(component());

當然此時需要使用以下命令安裝lodash包：

cnpm install lodash

打包命令

原始命令

./node_modules/.bin/webpack src/index.js dist/bundle.js

NPM 腳本(NPM Scripts)

通過 ‘創(chuàng)建webpack項目’ 的命令，可以創(chuàng)建package.json,如下：

{
  "name": "webpack-demo",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build": "webpack" // 配置webpack腳本命令
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
  ...
  },
}

運行命令 npm run build 相當于運行原始命令。

webpack基本概念

入口(entry)

入口起點(entry point)指示 webpack 應(yīng)該使用哪個模塊，來作為構(gòu)建其內(nèi)部依賴圖的開始。進入入口起點后，webpack 會找出有哪些模塊和庫是入口起點（直接和間接）依賴的。

出口

output 屬性告訴 webpack 在哪里輸出它所創(chuàng)建的 bundles，以及如何命名這些文件。你可以通過在配置中指定一個 output 字段，來配置這些處理過程

Loader

讓 webpack 能夠去處理那些非 JavaScript 文件（webpack 自身只理解 JavaScript）。loader 可以將所有類型的文件轉(zhuǎn)換為 webpack 能夠處理的有效，然后你就可以利用 webpack 的打包能力，對它們進行處理。

插件

loader 被用于轉(zhuǎn)換某些類型的模塊，而插件則可以用于執(zhí)行范圍更廣的任務(wù)。插件的范圍包括，從打包優(yōu)化和壓縮，一直到重新定義環(huán)境中的變量。插件接口功能極其強大，可以用來處理各種各樣的任務(wù)。
想要使用一個插件，你只需要require()它，然后把它添加到plugins
數(shù)組中。

使用 Loader

CSS Loader

安裝 css loader

cnpm install --save-dev style-loader
cnpm install --save-dev css-loader

配置CSS Loader

{
         test: /\.css$/,
          use: [
                'style-loader',
                'css-loader'
                ]
        }

使用css文件

引入css文件

import style from '../css/style.css';

需要使用css樣式的地方直接使用

 element.classList.add('hello');

加載圖片資源File Loader

安裝File Loader

cnpm install --save-dev file-loader

配置File Loader

{
         test: /\.(png|svg|jpg|gif)$/,
         use: [
                'file-loader'
              ]
        },

使用圖片資源

引入圖片資源

import icon from '../res/icon.png';

在使用的地方，直接使用

var myIcon = new Image();
myIcon.src = Icon;
element.appendChild(myIcon);

在css中直接引入圖片資源即可：

 background: url('../res/icon.png');

加載字體文件 File Loader

配置字體加載

{
    test: /\.(woff|woff2|eot|ttf|otf)$/,
    use: [
         'file-loader'
       ]
}

在css中使用字體文件

@font-face {
   font-family: 'MyFont';
   src:  url('../res/my-font.woff2') format('woff2'),
         url('../res/my-font.woff') format('woff');
   font-weight: 600;
   font-style: normal;
 }

ES2015 && React

要使用ES2015語法 和jsx語法，需要使用bable來轉(zhuǎn)換。 bable-loader相關(guān)知識點參考：

更多l(xiāng)oader參考：
https://doc.webpack-china.org/loaders/

安裝babel-loader

cnpm install babel-loader babel-core babel-preset-env webpack

配置bable-loader

 {
            test: /\.js$|\.jsx$/,
            exclude: /(node_modules|bower_components)/,
            use: {
                loader: 'babel-loader',
                options: {
                    presets: ['react','es2015']
                }
            }
 },

其中 presets: ['react','es2015'] ，表示支持react和es2015語法。

使用es2015

一個簡單的示例 print.js

export default function printMe() {
    console.log('I get called from print.js  !');
}

在index.js中使用方法printMe,首先引入文件：

import print from './print.js';

然后使用printMe方法，此時變成了print:

print();

使用react

要使用react，首選需要安裝。

安裝react

cnpm install react --save-dev
cnpm install react-dom --save-dev

編寫react組件

import React from 'react';
export default class Hello extends React.Component {
    render() {
        return <div><h1>hi alienzhou!</h1><h2>fdsayoyoyofdasfdsa1</h2></div>;
    }
}

使用react組件

首先引入react組件，代碼如下：

import Hello from './components/hello.jsx';

然后使用組件，代碼如下：

var element = document.createElement('div');
var mountNode = element;
    ReactDOM.render(<Hello/>, element);
    ReactDOM.render(<span><DatePicker/><DatePicker/></span>,element);
    ReactDOM.render(<Hello><Hello> , mountNode);

使用ant design 組件

安裝ant design

cnpm install antd --save-dev

使用ant design

  • 引入css文件
import 'antd/dist/antd.css';
  • 引入相關(guān)組件
import { DatePicker } from 'antd';
import { Tabs } from 'antd';
import { Steps } from 'antd';
  • 使用組件
  ReactDOM.render(
        <Tabs defaultActiveKey="1" onChange={callback}>
            <TabPane tab="Tab 1" key="1"><DatePicker /></TabPane>
            <TabPane tab="Tab 2" key="2">Content of Tab Pane 2</TabPane>
            <TabPane tab="Tab 3" key="3">Content of Tab Pane 3</TabPane>
        </Tabs>
        , mountNode);

常用插件

到目前為止，我們在

index.html

文件中手動引入所有資源，然而隨著應(yīng)用程序增長，并且一旦開始對
文件名使用哈希(hash)]并輸出多個 bundle，手動地對 index.html
文件進行管理，一切就會變得困難起來。然而，可以通過一些插件，會使這個過程更容易操控。

HtmlWebpackPlugin

HtmlWebpackPlugin 可以重新根據(jù)webpack.config.js中的配置重新生成index.html.

安裝

cnpm install --save-dev html-webpack-plugin

配置

 const HtmlWebpackPlugin = require('html-webpack-plugin');
  ...
 plugins: [
  new HtmlWebpackPlugin({
   title: 'Output Management'
   })
],

如果你在代碼編輯器中將 index.html 打開，你就會看到 HtmlWebpackPlugin 創(chuàng)建了一個全新的文件，所有的 bundle 會自動添加到 html 中。

clean-webpack-plugin

你可能已經(jīng)注意到，由于過去的指南和代碼示例遺留下來，導致我們的/dist文件夾相當雜亂。webpack 會生成文件，然后將這些文件放置在/dist文件夾中，但是 webpack 無法追蹤到哪些文件是實際在項目中用到的。
通常，在每次構(gòu)建前清理/dist文件夾，是比較推薦的做法，因此只會生成用到的文件。讓我們完成這個需求。

安裝

cnpm install clean-webpack-plugin --save-dev

配置

 const CleanWebpackPlugin = require('clean-webpack-plugin');

plugins: [
  new CleanWebpackPlugin(['dist']),
  new HtmlWebpackPlugin({
    title: 'Output Management'
  })
],

webpack實時刷新

每次要編譯代碼時，手動運行 npm run build 就會變得很麻煩。
webpack 中有幾個不同的選項，可以幫助你在代碼發(fā)生變化后自動編譯代碼：
*webpack's Watch Mode
*webpack-dev-server
*webpack-dev-middleware

webpack-dev-server

本文主要介紹下webpack-dev-server，webpack-dev-server不僅能夠自動build，而且還能夠自動刷新瀏覽器。

安裝webpack-dev-server

cnpm install --save-dev webpack-dev-server

配置webpack-dev-server

在webpack.config.js中增加如下配置：

devServer: {
contentBase: './dist'
},

然后在package.json中增加如下script：

"start": "webpack-dev-server --open",

現(xiàn)在，我們可以在命令行中運行 npm start，就會看到瀏覽器自動加載頁面。如果現(xiàn)在修改和保存任意源文件，web 服務(wù)器就會自動重新加載編譯后的代碼。試一下！

webpack-dev-middleware

使用webpack-dev-middleware可以考慮和express 等nodejs 的server結(jié)合使用，具體使用參考https://doc.webpack-china.org/guides/development/#-webpack-dev-middleware。

source map

當 webpack 打包源代碼時，可能會很難追蹤到錯誤和警告在源代碼中的原始位置。例如，如果將三個源文件（a.js,b.js和c.js）打包到一個 bundle（bundle.js）中，而其中一個源文件包含一個錯誤，那么堆棧跟蹤就會簡單地指向到
bundle.js。這并通常沒有太多幫助，因為你可能需要準確地知道錯誤來自于哪個源文件。
為了更容易地追蹤錯誤和警告，JavaScript 提供了source map(http://blog.teamtreehouse.com/introduction-source-maps)
功能，將編譯后的代碼映射回原始源代碼。如果一個錯誤來自于
b.js，source map 就會明確的告訴你。
source map 有很多不同的選項可用，請務(wù)必仔細閱讀它們，以便可以根據(jù)需要進行配置。對于本指南，我們使用inline-source-map選項

配置

...
devtool: 'inline-source-map',
...

更多詳細額配置參考：
https://doc.webpack-china.org/configuration/devtool

react學習資源

Ant Design 學習資源

文檔參考鏈接
https://design.alipay.com/develop/mobile/introduce

最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時請結(jié)合常識與多方信息審慎甄別。
平臺聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點，簡書系信息發(fā)布平臺，僅提供信息存儲服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

  • 無意中看到zhangwnag大佬分享的webpack教程感覺受益匪淺，特此分享以備自己日后查看，也希望更多的人看到...
    小小字符閱讀 8,374評論 7贊 35
  • 版權(quán)聲明：本文為博主原創(chuàng)文章，未經(jīng)博主允許不得轉(zhuǎn)載。 webpack介紹和使用 一、webpack介紹 1、由來 ...
    it筱竹閱讀 11,468評論 0贊 21
  • webpack 介紹 webpack 是什么 為什么引入新的打包工具 webpack 核心思想 webpack 安...
    yxsGert閱讀 6,674評論 2贊 71
  • GitChat技術(shù)雜談 前言 本文較長，為了節(jié)省你的閱讀時間，在文前列寫作思路如下： 什么是 webpack，它要...
    蕭玄辭閱讀 12,899評論 7贊 110
  • 你不需要在意太多的眼光 也別讓自己太為難 好好把劉亮程的書看完啊 哦，...
    一顆樹下閱讀 151評論 0贊 0

友情鏈接更多精彩內(nèi)容