国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

Webpack3簡單入門2

Labradors / 746人閱讀

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

本工程代碼

創建工程
$ 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 中的一個全局變量,它指向當前執行腳本所在的目錄

接下來只要執行 $ yarn run webpack 即可。

配置執行腳本命令

在 package.json 中添加:

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

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

使用 webpack 構建本地服務器

如果想讓瀏覽器監聽文件的修改,自動刷新。webpack 提供了 webpack-dev-server 來實現這個功能。

yarn add webpack-dev-server

在 webpack.config.js 中配置:

devServer: {
  contentBase: "./public",  // 本地服務器所加載的頁面所在的目錄
  historyApiFallback: true, // 不跳轉
  inline: true // 實時刷新
}

在 package.json 中配置腳本命令

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

接下來可以執行 $ yarn server 即可打開并監聽了。

使用 Loaders

想要 webpack 能分析編譯 css 等其他文件,需要使用各種 loader 支持。(對 json,webpack 已經內置了處理器。)

添加對 css 支持:

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

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

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

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

添加對 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 了。

對 Babel 的配置

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

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

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

插件的范圍包括,從打包優化和壓縮,一直到重新定義環境中的變量。可以用來處理各種各樣的任務。

使用 html-webpack-plugin, 它會自動幫你生成一個 html 文件,并且引用相關的 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",  // 本地服務器所加載的頁面所在的目錄
...
  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...

文章版權歸作者所有,未經允許請勿轉載,若此文章存在違規行為,您可以聯系管理員刪除。

轉載請注明本文地址:http://m.specialneedsforspecialkids.com/yun/90476.html

相關文章

  • Webpack3簡單入門1

    摘要:使用測試的使用教程。本工程代碼創建工程安裝新建一個配置文件內容添加工程內容內容內容編譯運行說明如果過程中發生錯誤,會在工程根目錄下自動生成文件。 使用 yarn 測試 webpack 的使用教程。 本工程代碼 創建工程 $ mkdir test-webpack-app-yarn $ cd test-webpack-app-yarn $ yarn init # ... 安裝 webpac...

    DrizzleX 評論0 收藏0
  • ES6入門到進階(一):let、解構賦值、字符串模板、函數

    摘要:注意問題,不在是運行時所在的對象箭頭函數里面沒有用箭頭函數不能當構造函數下一篇入門到進階二循環數組對象參考視頻資料經典入門到進階 一、簡介 ES6 -> ECMA 標準 ES6 -> 2015年6月 ES6.0 每年6月份,發布一個版本 ES6環境: webpack3.x Traceur 二、let、const 2.1 關于定義(聲明)變量 var a=12; ...

    WalkerXu 評論0 收藏0
  • 2017-06-21 前端日報

    摘要:前端日報精選實踐總結掘金第期動畫與動效之四完全指南眾成翻譯個編碼小技巧教程使用瀏覽器開發者工具檢查動畫性能眾成翻譯中文圖書深入理解譯變量的正確使用方法知乎專欄正式發布眾成翻譯來了知乎專欄代碼運行過程簡述一個人文章的中文 2017-06-21 前端日報 精選 redux-react實踐總結 - 掘金【第972期】HTML5動畫與動效之四flexbox 完全指南 - 眾成翻譯19個Java...

    Chao 評論0 收藏0
  • webpack系列——webpack3導入jQuery的新方案

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

    amc 評論0 收藏0

發表評論

0條評論

Labradors

|高級講師

TA的文章

閱讀更多
最新活動
閱讀需要支付1元查看
<