使用webpack 進行ES6開發

時間 2019-11-10

原文原文鏈接

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

一些題外話

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

開始

1、建立目錄

簡單建立目錄結構以下：node

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

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

2、安裝 webpack

首先仍是要保證安裝了 nodejs，而後經過 npm 安裝便可：git

npm install webpack -g

3、配置

打開 webpack.config.js，編輯以下：es6

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 的配置對象，其中：github

entry 是入口文件web
output 是輸出文件，這裏的 filename 給的是 bundle.js，也就是當 webpack 運行完以後將生成一個 bundle.js 文件npm
loaders 是使用到的全部加載器，在 gulp 裏面咱們都是使用的是 gulp 的一些插件好比 gulp-rename、gulp-concat 等等，在 webpack 裏面相似，使用的是各類 loaders，詳細的 loaders 列表在這裏。gulp

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

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

4、安裝 loaders

安裝 babel-loader

npm install babel-loader --save-dev

安裝轉碼規則

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

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

5、碼代碼

/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 了。

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Document</title>
</head>
<body>
  <script src="bundle.js"></script>
</body>
</html>

6、運行

由於有 webpack.config.js 配置文件，因此只須要輸入 webpack 就能運行， webpack 會自動去執行配置文件的內容：

webpack

對於大型項目，可能 webpack 會運行好久，因此能夠添加一個進度條便於查看：

webpack --progress --colors

在 gulp 裏，使用 watch 能夠監視文件的變化，而在 webpack 裏，只需加一個參數：

webpack --watch

因此，咱們可使用下面的命令運行：

webpack --progress --colors --watch

就是這麼簡單！

相關標籤/搜索

每日一句

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