webpack4.0入門指南（二）轉換es7語法解析靜態資源

以前寫了怎麼轉換es6的語法，若是在項目中用了es7的語法和樣式，圖片，字體該如何配置，下面就寫一下配置。

轉換es7語法

把以前demo3文件夾一份命名爲demo4。 修改demo4/src/index.js文件

let obj = {name: 'lanpangzhi'};
let obj2 = {blog: 'http://blog.langpz.com'};
let newObj = {...obj, ...obj2};  // es7語法
console.log(newObj);
複製代碼

安裝babel插件，在項目根目錄執行命令

npm install babel-preset-stage-0 -D  // ES7不一樣階段語法提案的轉碼規則（共有4個階段）
複製代碼

stage-0 包含 stage-1 stage-2 stage-3 階段 還包含 babel-plugin-transform-do-expressionsbabel-plugin-transform-function-bind 兩個插件的功能，階段標準

修改demo4/.babelrc文件

{
  "presets": ["env","stage-0"]
}
複製代碼

在demo4路徑下執行 webpack，就看到打包成功了打開demo4/index.js文件控制檯就輸出。 {name: "lanpangzhi", blog: "blog.langpz.com"}

解析CSS

爲了從 JavaScript 模塊中 import 一個 CSS 文件，你須要配置以下loader。 安裝babel插件，在項目根目錄執行命令。

npm install --save-dev style-loader css-loader
複製代碼

修改demo4/webpack.config.js文件 在rules數組裏添加一個規則。

{
  test: /\.css$/, // 匹配全部.css結尾的文件
  use: [ // use要從右往左寫，先轉成樣式，再打包到style標籤
    'style-loader',
    'css-loader'
  ]
}
複製代碼

建立css文件

cd src && touch index.css
複製代碼

修改demo4/src/index.css文件

body {
  background: red;
}
複製代碼

引入css文件 修改demo4/src/index.js文件

// 最上面添加一行
import './index.css';
複製代碼

在demo4路徑下執行 webpack，就看到打包成功。打開demo4/index.html就有紅色的背景色了。

解析sass

爲了從 JavaScript 模塊中 import 一個 scss 文件，你須要配置以下loader。 安裝babel插件，在項目根目錄執行命令。

npm install sass-loader node-sass webpack --save-dev
複製代碼

修改demo4/webpack.config.js文件，在rules數組裏添加一個規則。

{
  test: /\.scss$/, // 匹配全部.scss結尾的文件
  use: [ 
    'style-loader', // 將 JS 字符串生成爲 style 節點
    'css-loader', // 將 CSS 轉化成 CommonJS 模塊
    'sass-loader' // 將 Sass 編譯成 CSS
  ]
}
複製代碼

建立scss文件

cd src && touch index.scss
複製代碼

修改demo4/src/index.scss文件

$body-color: yellow;
body {
  background: $body-color;
}
複製代碼

修改demo4/src/index.js文件

// 最上面一行替換以下代碼
import './index.scss';
複製代碼

在demo4路徑下執行 webpack，就看到sass編譯成功。打開demo4/index.html就有綠色的背景色了。 !()[hexo-1252491761.file.myqcloud.com/webpack4.0入…] 若是你想解析其餘預處理css語言安裝對應loader，添加規則就能夠編譯了。 如less less-loader。

解析圖片

假想，如今咱們正在下載 CSS，可是咱們的背景和圖標這些圖片，要如何處理呢？使用 file-loader，咱們能夠輕鬆地將這些內容混合到 CSS 中。 安裝babel插件，在項目根目錄執行命令。

npm install --save-dev file-loader 
複製代碼

隨意再網上下載一個png圖片放到demo4/src/目錄下，命名爲1.png

修改demo4/src/index.scss文件

body {
  background: url(./1.png);
}
複製代碼

修改demo4/webpack.config.js文件，在rules數組裏添加一個規則。

{
  test: /\.(png|svg|jpg|gif)$/, // 匹配全部.png和.svg和.jpg和.gif結尾的文件
  use: [
    {
      loader: 'file-loader',
      options: {
        publicPath: 'dist/' // 設置public 發佈目錄。
      }
    }
  ]
}
複製代碼

在demo4路徑下執行 webpack，就看到圖片編譯成功。打開demo4/index.html就有背景圖。

加載字體

像字體這樣的其餘資源如何處理呢？file-loader 和 url-loader 能夠接收並加載任何文件，而後將其輸出到構建目錄。這就是說，咱們能夠將它們用於任何類型的文件，包括字體。讓咱們更新 webpack.config.js 來處理字體文件。 修改demo4/webpack.config.js文件，在rules數組裏添加一個規則。

{
 test: /\.(woff|woff2|eot|ttf|otf)$/,
 use: [
   'file-loader'
 ]
}
複製代碼

若是樣式文件裏面引入了字體就會被打包，這裏就不演示了。

demo倉庫地址

github.com/lanpangzhi/…

個人博客和GitHub地址

github.com/lanpangzhi

blog.langpz.com