使用webpack 進行ES6開發

yvonne 發布于2019-08-19 17:37 / 1241人閱讀

摘要：年前摸索著寫了一個使用進行開發，今天再摸索著學習一下吧。。一些題外話使用的初衷其實是想用。這里使用了一個叫的加載器，在使用進行開發里面有介紹過，我們都是使用對風格的代碼進行轉換，所以在里面同樣使用了轉碼規則。

年前摸索著寫了一個使用gulp 進行ES6開發，今天再摸索著學習一下webpack吧。。

一些題外話

使用 webpack 的初衷其實是想用 React。
學習 React 的時候，始終被一個問題困擾：既然組件已經模塊化了，比如一個 jsx 文件對應一個組件，這個文件里包含了這個組件的 html 和 js，但是他的樣式該寫在哪里呢？看的網上教程都是寫在 jsx 文件里，通過變量定義，或者直接就寫到全局樣式里面去了。通過變量寫不能定義偽元素，而且在 js 里這樣寫一堆樣式感覺很難受，但是寫在全局又不符合組件化的思想。
查資料的時候發現了一個 css modules 的概念，詳細可以參考這篇文章。當然css沒有原生支持這種概念，但在 webpack 里，通過一個 css-loader 就能輕易使用。另外 webpack+React 也很流行的，于是我就開始學習 webpack 了。

開始 一、創建目錄

簡單創建目錄結構如下：

/es6
-- main.js
-- Person.js
index.html
webpack.config.js

es6 里面存放的是 ES6 風格的代碼，main.js 是入口文件， index.html 是首頁， webpack.config.js 是 webpack 的配置文件。

二、安裝 webpack

首先還是要保證安裝了 nodejs，然后通過 npm 安裝即可：

npm install webpack -g

三、配置

打開 webpack.config.js，編輯如下：

var path = require("path");
module.exports = {
  entry: "./es6/main.js",
  output: {
    path: __dirname,
    filename: "bundle.js"
  },
  module: {
    loaders: [
      {
        test: path.join(__dirname, "es6"),
        loader: "babel-loader",
        query: {
          presets: ["es2015"]
        }
      }
    ]
  }
}

module.exports導出的對象即是 webpack 的配置對象，其中：

entry 是入口文件

output 是輸出文件，這里的 filename 給的是 bundle.js，也就是當 webpack 運行完之后將生成一個 bundle.js 文件

loaders 是使用到的所有加載器，在 gulp 里面我們都是使用的是 gulp 的一些插件比如 gulp-rename、gulp-concat 等等，在 webpack 里面類似，使用的是各種 loaders，詳細的 loaders 列表在這里。

更多配置屬性的含義在這里。

這里使用了一個叫 babel-loader 的加載器，在使用 gulp 進行ES6開發里面有介紹過，我們都是使用 babel 對 ES6 風格的代碼進行轉換，所以在 query 里面同樣使用了 es2015 轉碼規則。下面就安裝這個加載器。

四、安裝 loaders 安裝 babel-loader

npm install babel-loader --save-dev

安裝轉碼規則

npm install babel-preset-es2015 --save-dev

至此準備工作已經做完了，下面可以編寫代碼了。

五、碼代碼 /es6/main.js

import Person from "./Person.js";

let p = new Person("張三", 20);
document.write(p.say());

/es6/Person.js

class Person{
  constructor(name, age){
    this.name = name;
    this.age = age;
  }

  say(){
    return `我是${this.name},我今年${this.age}歲了。`;
  }
}

export default Person;

index.html

在這里就可以直接引用 bundle.js 了。




  
  Document

六、運行

因為有 webpack.config.js 配置文件，所以只需要輸入 webpack 就能運行， webpack 會自動去執行配置文件的內容：

webpack

對于大型項目，可能 webpack 會運行很久，所以可以添加一個進度條便于查看：

webpack --progress --colors

在 gulp 里，使用 watch 可以監視文件的變化，而在 webpack 里，只需加一個參數：

webpack --watch

所以，我們可以使用下面的命令運行：

webpack --progress --colors --watch

就是這么簡單！

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

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

ES6-開發環境搭建（1）

摘要：全局安裝本地安裝轉碼規則安裝完成后，我們可以看一下我們的文件，已經多了選項。直接在線編譯提供一個在線編譯器，可以在線將代碼轉為代碼。古語有云：君子生非異也，善假于物；工欲善其事，必先利其器。由于有些低版本的瀏覽器還是不支持ES6語法，學習ES6，首先要學會搭建一個基本的ES6開發環境，利用工具，把ES6的語法轉變成ES5的語法。 1、使用Babel把ES6編譯成ES5 1...

android_c 2019-08-23 15:21 評論0 收藏0
前端構建_webpack

摘要：一個文件，一張圖片一個文件都是一個模塊，都能用導入模塊的語法的，的導入進來。自身只能讀懂類型的文件，其它的都不認識。 webpack 是什么？ webpack是一個前端模塊化打包工具指（由于模塊化開發，所以需要打包，這里所說的模塊化開發主要指JS) 由于現代前端應用程序越來越復雜，需要采用模塊化進行開發，但瀏覽器還未支持模塊化開發，所以webpack才誕生 webpack默認只支持js...

ethernet 2019-08-23 14:24 評論0 收藏0
vue-cli + es6 多頁面項目開發及部署

摘要：前段時間項目組計劃快速開發一個新的項目，開發那邊提供殼子和部分系統級功能，所有的頁面由完成，考慮兼容性安卓及。后面會繼續優化，先把目前的基本部署方式記錄下來。前段時間項目組計劃快速開發一個新的App項目，App開發那邊提供殼子和部分系統級功能，所有的頁面由h5完成，考慮兼容性安卓4.1及ios7.1。全新的項目，沒有歷史包袱，就嘗試了新的開發模式，采用了webpack + vue-c...

felix0913 2019-08-22 15:35 評論0 收藏0
webpack 項目構建：（二）ES6 編譯環境搭建

摘要：本質就是一個編譯器，通過將源代碼解析成抽象語法樹將源代碼的結果一系列轉換生成目標代碼的將目標代碼的轉換成代碼。項目構建三開發環境本地服務器搭建源碼下載地址參考資料入門阮一峰中文文檔中文網注：以下教程均在 windows 環境實現，使用其他操作系統的同學實踐過程可能會有些出入。 ??在上一章 webpack 項目構建：（一）基本架構搭建我們搭建了一個最基本的 webpack 項目，現...

marser 2019-08-22 15:08 評論0 收藏0