成人无码视频,亚洲精品久久久久av无码,午夜精品久久久久久毛片,亚洲 中文字幕 日韩 无码

資訊專欄INFORMATION COLUMN

Webpack3簡(jiǎn)單入門2

Labradors / 785人閱讀

摘要：本工程代碼創(chuàng)建工程添加工程文件通過配置文件來使用添加文件。如下已多次提及的唯一入口文件打包后的文件存放的地方打包后輸出文件的文件名是中的一個(gè)全局變量，它指向當(dāng)前執(zhí)行腳本所在的目錄接下來只要執(zhí)行即可。

本工程代碼

創(chuàng)建工程 
$ yarn init
$ yarn add webpack

# **添加工程文件：**
# public/index.html


  
    
    Webpack Sample Project
  
  
    

    

    
  


# src/app.js:
document.querySelector("#root").appendChild(hello());

# src/hello.js
module.exports = function() {
  var hello = document.createElement("div");
  hello.textContent = "Hello World!";
  return hello;
}

# webpack
$ yarn run webpack src/app.js public/bundle.js
$ open public/index.html
通過配置文件來使用 webpack

添加 webpack.config.js 文件。如下：

module.exports = {
  entry:  [
    "./src/app.js", // 已多次提及的唯一入口文件
  ],
  output: {
    path: __dirname + "/public", // 打包后的文件存放的地方
    filename: "bundle.js" // 打包后輸出文件的文件名
  }
}

__dirname 是 node.js 中的一個(gè)全局變量，它指向當(dāng)前執(zhí)行腳本所在的目錄

接下來只要執(zhí)行 $ yarn run webpack 即可。

配置執(zhí)行腳本命令

在 package.json 中添加：

"scripts": {
  "start": "webpack"
},

接下來可以執(zhí)行 $ yarn start 即可編譯打包。

使用 webpack 構(gòu)建本地服務(wù)器

如果想讓瀏覽器監(jiān)聽文件的修改，自動(dòng)刷新。webpack 提供了 webpack-dev-server 來實(shí)現(xiàn)這個(gè)功能。

yarn add webpack-dev-server

在 webpack.config.js 中配置：

devServer: {
  contentBase: "./public",  // 本地服務(wù)器所加載的頁面所在的目錄
  historyApiFallback: true, // 不跳轉(zhuǎn)
  inline: true // 實(shí)時(shí)刷新
}

在 package.json 中配置腳本命令

"scripts": {
  "server": "webpack-dev-server --open"
}

接下來可以執(zhí)行 $ yarn server 即可打開并監(jiān)聽了。

使用 Loaders

想要 webpack 能分析編譯 css 等其他文件，需要使用各種 loader 支持。（對(duì) json，webpack 已經(jīng)內(nèi)置了處理器。）

添加對(duì) css 支持：

    # 安裝依賴
    $ yarn add css-loader style-loader

安裝完 loader 需要 webpack.config.js 中添加“module”配置。

module: {
  rules: [
    {
      test: /.css$/,
      use: [
        { loader: "style-loader" }, // style-loader 寫前面，否則報(bào)錯(cuò) -_-!!
        { loader: "css-loader" }
      ]
    }
  ]
  // test: 匹配文件拓展名（必須）
  // use: 使用的 loader 的名稱（必須）
},

重新編譯，即可支持了 css 樣式。

添加對(duì) React，JSX 支持：

# 安裝 babel 依賴
$ yarn add babel-core babel-loader babel-preset-env babel-preset-react

# webpack.config.js 添加 module
{
  test: /(.jsx|.js)$/,
  use: {
    loader: "babel-loader",
    options: {
      presets: [ "env", "react"]
    }
  },
  exclude: /node_modules/
}

# 安裝 react, react-dom
$ yarn add react react-dom

# 加入 JSX 的 Happy.js
import React, {Component} from "react";

class Happy extends Component {
  render() {
    return (
      

        
 I am happy! 

      

    );
  }
}

export default Happy;

# 修改 app.js
import React from "react";
import ReactDOM from "react-dom";
import Happy from "./Happy";
import "./style.css";
const hello = require("./hello.js");

ReactDOM.render(
  ,
  document.getElementById("root")
);

document.querySelector("#root").appendChild(hello());

重新編譯后，就可以看到我們添加的 Happy 了。

對(duì) Babel 的配置：

可以為 babel 新建一個(gè) ‘.babelrc’ 來多帶帶配置 babel

# .babelrc:
{
  "presets": [ "env", "react"]
}

# webpack.config.js 去除 babel-loader 下的 options
使用插件

插件的范圍包括，從打包優(yōu)化和壓縮，一直到重新定義環(huán)境中的變量。可以用來處理各種各樣的任務(wù)。

使用 html-webpack-plugin, 它會(huì)自動(dòng)幫你生成一個(gè) html 文件，并且引用相關(guān)的 assets 文件(如 css, js)。

# 安裝庫
$ yarn add html-webpack-plugin

# 修改 webpack.config.js
const HtmlWebpackPlugin = require("html-webpack-plugin");
const path = require("path");
...
  output: {
    path: path.resolve(__dirname, "build"), // 打包后的文件存放的地方
    filename: "bundle.js" // 打包后輸出文件的文件名
  },
...
  devServer: {
    contentBase: "./build",  // 本地服務(wù)器所加載的頁面所在的目錄
...
  plugins: [
    new HtmlWebpackPlugin({
      template: path.resolve(__dirname, "src/index.tmpl.html")
    })
  ]
};

再編譯"""$ yarn start"""。可以看到目錄下生成了“build/”。

參考
https://doc.webpack-china.org...
https://www.jianshu.com/p/42e...

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://m.hztianpu.com/yun/90476.html

相關(guān)文章

  • Webpack3簡(jiǎn)單入門1

    摘要：使用測(cè)試的使用教程。本工程代碼創(chuàng)建工程安裝新建一個(gè)配置文件內(nèi)容添加工程內(nèi)容內(nèi)容內(nèi)容編譯運(yùn)行說明如果過程中發(fā)生錯(cuò)誤，會(huì)在工程根目錄下自動(dòng)生成文件。 使用 yarn 測(cè)試 webpack 的使用教程。 本工程代碼 創(chuàng)建工程 $ mkdir test-webpack-app-yarn $ cd test-webpack-app-yarn $ yarn init # ... 安裝 webpac...

    DrizzleX 評(píng)論0 收藏0

  • ES6入門到進(jìn)階（一）：let、解構(gòu)賦值、字符串模板、函數(shù)

    摘要：注意問題，不在是運(yùn)行時(shí)所在的對(duì)象箭頭函數(shù)里面沒有用箭頭函數(shù)不能當(dāng)構(gòu)造函數(shù)下一篇入門到進(jìn)階二循環(huán)數(shù)組對(duì)象參考視頻資料經(jīng)典入門到進(jìn)階 一、簡(jiǎn)介 ES6 -> ECMA 標(biāo)準(zhǔn) ES6 -> 2015年6月 ES6.0 每年6月份，發(fā)布一個(gè)版本 ES6環(huán)境: webpack3.x Traceur 二、let、const 2.1 關(guān)于定義(聲明)變量 var a=12; ...

    WalkerXu 評(píng)論0 收藏0

  • 2017-06-21 前端日?qǐng)?bào)

    摘要：前端日?qǐng)?bào)精選實(shí)踐總結(jié)掘金第期動(dòng)畫與動(dòng)效之四完全指南眾成翻譯個(gè)編碼小技巧教程使用瀏覽器開發(fā)者工具檢查動(dòng)畫性能眾成翻譯中文圖書深入理解譯變量的正確使用方法知乎專欄正式發(fā)布眾成翻譯來了知乎專欄代碼運(yùn)行過程簡(jiǎn)述一個(gè)人文章的中文 2017-06-21 前端日?qǐng)?bào) 精選 redux-react實(shí)踐總結(jié) - 掘金【第972期】HTML5動(dòng)畫與動(dòng)效之四flexbox 完全指南 - 眾成翻譯19個(gè)Java...

    Chao 評(píng)論0 收藏0

  • webpack系列——webpack3導(dǎo)入jQuery的新方案

    摘要：但是，有時(shí)候可能的一些庫不夠牛逼，還需要用到的相關(guān)插件來輔助完成，這些插件又和形成了依賴，最終，和我一樣，你也可能需要在中導(dǎo)入。關(guān)于異步打包組件的方案，請(qǐng)看我的其他文章只要你使用了，無論是，還是開發(fā)者也同樣適用這種方案 本文的目的 拒絕全局導(dǎo)入jQuery?。?拒絕script導(dǎo)入jQuery??！ 找到一種只在當(dāng)前js組件中引入jQuery，并且使用webpack切割打包的方案！ 測(cè)試...

    amc 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

閱讀需要支付1元查看
<