webpack 入門實踐（二）

CSS Webpack ECMAScript · 發表 2019-01-19 08:01:36

摘要： ECMAScript 6（以下簡稱ES6）是JavaScript語言的下一代標準，已經在2015年6月正式釋出了。它的目標，是使得JavaScript語言可以用來編寫複雜的大型應用程式，成為企業級開發語言。今天主流的瀏覽器都已經支援 es6 語法，所以大家可...

ECMAScript 6 （以下簡稱ES6）是JavaScript語言的下一代標準，已經在2015年6月正式釋出了。它的目標，是使得JavaScript語言可以用來編寫複雜的大型應用程式，成為企業級開發語言。

今天主流的瀏覽器都已經支援 es6 語法，所以大家可以放心大膽地去遵循 es6 寫 javascript。

sass css前處理器，並不是css的替代品，它只是讓css變得更加高效、可維護。

他們已經不是讓人眼前一亮的新鮮事物了，今天大多數專案都會用到以上兩種技術（說技術有點不算貼切）。今天我們將上次專案進行修改，用到以上兩種技術。

建立一個 _colors.scss ，在這個檔案中，我們只需要定義一個顏色變數。這個變數可供其他 scss 檔案使用。

然後我們將 list.css 檔案的內容合併到 main.css，將 main.css 重新命名為 main.scss. 並在 main.scss 中使用 _colors.scss 中定義好的變數 $primary

在 app.js 中我們使用 => (arrow function) 來代替原有 function 寫法。並使用 const（靜態變數）來替換 var ，const 和 arrow function 都是 es6 的新特性。

我們看一看現在專案結構

然後我們要在 app.js 中引用一下 main.scss 檔案。

修改一下 webpack.config.js 檔案

需要使用 npm install 安裝一下依賴

sass-loader node-sass css-loader( 這些模組用於載入 sass 檔案 sass-loader 是 sass 檔案的載入器，要將 sass 編譯為 css 我們就需要安裝 node-sass，最後使用 css-loader 來載入編譯好的 css，這裡我們沒有用 style-loader 來將 css 寫入 js 檔案，而是使用 extract-text-webpack-plugin 外掛將 css 檔案分離到獨立的 css 檔案供 html 引用)

extract-text-webpack-plugin

babel-core babel-loader loader-preset-es2015（用 babel 將 es2015 降級編譯都幾乎所有瀏覽器都支援的 es3, 用到預設 es2015 外掛。