輕鬆搭建 JavaScript 2015 Development Tools 開發/生產環境

時間 2019-11-06

標籤輕鬆搭建 javascript development tools 開發生產環境欄目 JavaScript 简体版

原文原文鏈接

[重構] 2016-3-4

Introduction

基礎結構參考自https://github.com/gaearon/react-transform-boilerplatecss

做者Dan Abramovhtml

react-webpack-babel-development-tools

在其基礎之上添加了對主業務資源，js庫資源，css資源的分離打包，和對生產環境html的模板的生成react

Usage

git clone https://github.com/qianjiahao/webpack-babel-react-development-tools.git [your project name]
cd [your project name]
npm install

developmentwebpack

npm start -> http://localhost:3000

productiongit

npm run build

Detail

分離主業務與庫資源github

// webpack.config.dev.js

entry: {
  app: [
    'eventsource-polyfill', // necessary for hot reloading with IE
    'webpack-hot-middleware/client',
    './src/index'
  ],
  vendors: ['react']
},

// 將主業務與庫資源分離
// 優點：當咱們更新項目時，若是庫資源沒有涉及更新，直接打包主業務資源便可;
// 而且分離庫資源後的主資源文件大小也很是的小，可加快文件的下載速度，節省流量。

plugins: [
  new webpack.optimize.CommonsChunkPlugin('vendors', '[name].js'),
],

// 根據咱們的entry打包庫資源，名字由entry的名字命名。

分離合並樣式資源文件web

// 因爲咱們在entry的文件中引入了樣式文件 src/App.js
import './styles/common.css';

// webpack.config.dev.js

var ExtractTextPlugin = require('extract-text-webpack-plugin');

module: {
  loaders: [
    {
      test: /\.css$/, loader: ExtractTextPlugin.extract('style', 'css')
    }
  ]
}

plugins: [
  new ExtractTextPlugin('style.css')
],

// 咱們須要 style-loader , css-loader 模塊去加載引入的資源文件，
並經過 extract-text-webpack-plugin 來合併打包樣式資源，命名爲 style.css 。

加載打包圖片npm

// webpack.config.dev.js

module: {
  loaders: [
    {
      test: /\.(png|jpg)$/, loader: 'url?limit=25000'
    }
  ]
}

// 咱們選擇加載的圖片格式爲png或jpg，並限定當文件小於25kb，轉換爲base64編碼。
// 優點：將一些小而且不常更新的圖片轉換base64編碼後，能夠減小一次或屢次http請求。
// 但這個limit應該定義成一個合適的值，由於若是將稍大些的圖片轉爲base64後，會生成大量字符，
// 反而下降咱們的加載速度。

加載font/svgapi

// webpack.config.dev.js

module: {
  loaders: [
    {
      test: /\.woff(\?v=\d+\.\d+\.\d+)?$/,
      loader: "url?limit=10000&mimetype=application/font-woff"
    },{
      test: /\.ttf(\?v=\d+\.\d+\.\d+)?$/,
      loader: "url?limit=10000&mimetype=application/octet-stream"
    },{
      test: /\.eot(\?v=\d+\.\d+\.\d+)?$/,
      loader: "file"
    },{
      test: /\.svg(\?v=\d+\.\d+\.\d+)?$/,
      loader: "url?limit=10000&mimetype=image/svg+xml"
    }
  ]
}

加載Google Material iconsbabel

// 咱們使用google開源的icon庫，首先引入資源文件 src/template/index.ejs 、index.html

<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">

// 本地咱們須要定義一些樣式  src/styles/font.css

.material-icons {
  font-family: 'Material Icons';
  font-weight: normal;
  font-style: normal;
  font-size: 24px;  /* Preferred icon size */
  display: inline-block;
  line-height: 1;
  text-transform: none;
  letter-spacing: normal;
  word-wrap: normal;
  white-space: nowrap;
  direction: ltr;

  /* Support for all WebKit browsers. */
  -webkit-font-smoothing: antialiased;
  /* Support for Safari and Chrome. */
  text-rendering: optimizeLegibility;

  /* Support for Firefox. */
  -moz-osx-font-smoothing: grayscale;

  /* Support for IE. */
  font-feature-settings: 'liga';
}

/* Rules for sizing the icon. */
.material-icons.md-18 { font-size: 18px; }
.material-icons.md-24 { font-size: 24px; }
.material-icons.md-36 { font-size: 36px; }
.material-icons.md-48 { font-size: 48px; }
.material-icons.md-56 { font-size: 56px; }
.material-icons.md-64 { font-size: 64px; }
.material-icons.md-80 { font-size: 80px; }

/* Rules for using icons as black on a light background. */
.material-icons.md-dark { color: rgba(0, 0, 0, 0.54); }
.material-icons.md-dark.md-inactive { color: rgba(0, 0, 0, 0.26); }

/* Rules for using icons as white on a dark background. */
.material-icons.md-light { color: rgba(255, 255, 255, 1); }
.material-icons.md-light.md-inactive { color: rgba(255, 255, 255, 0.3); }

// 使用時就選擇合適的icon便可，注意：在react中，class須要改成className  src/App.js

<i className="material-icons md-36">face</i>

生成html文件

// 定義模板 src/template/index.ejs

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width">
    <title><%= htmlWebpackPlugin.options.title %></title>
</head>
<body>

    <div id="root"></div>
</body>
</html>

// webpack.config.dev.js

var Html = require('html-webpack-plugin');

plugins: [
  new Html({
    title: 'webpack-babel-react-development-tools',
    filename: 'index.html',
    template: path.join(__dirname, 'src/template/index.ejs')
  }),
],

// 經過工具來生成咱們的模板文件，title會替換index.ejs中的title，
// filename定義了生成文件的名字，template定義了模板的路徑，
// [html-webpack-plugin@2.x版本後，工具生成的資源文件會已chunk的形式自動注入]。

生產環境

經過將文件名添加hash來強制讓用戶更新資源文件，防止舊文件對項目的影響。

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。