webpack從零開始第5課:模塊篇

時間 2019-11-06

標籤 webpack 開始模塊简体版

原文原文鏈接

webpack目錄css

本文參考文檔html

模塊總覽vue

babel-loader
vue-loader
url-loader+file-loader
html-loader
postcss-loader + css-loader + style-loader

console.log('我是首頁');
document.write("萬事開頭難")
const AA = {
    name:'張學友',
    city: '香港'
}
const BB = {
    ...AA,
    age:40,
    song:'吻別'
}
document.write(BB.name)

必裝loader_1: babel安裝和配置

官方網站: http://babeljs.io/
代碼託管: https://github.com/babel/babel
babel-loader參考: https://webpack.js.org/loader...
babel講解參考阮一峯老師文章: http://www.ruanyifeng.com/blo...

A: 安裝

01：安裝babel核心

babel核心是必裝，若是在命令行下工做，還得安裝babel-cli，babel-loader實際上是就調用的它
cnpm i babel-core -Dnode

02：安裝babel-loader

babel-loader是webpack中的一個專爲babel寫的加載器
cnpm i babel-loader -Dreact

03：安裝babel預置

babel有不少預置，不一樣的預置有不一樣的功能，在https://github.com/babel/babel/tree/master/packages中能夠看到，有不少預置(以babel-preset-開頭的)
對於es2015,es2016,es2017,env,stage-0,stage-1,stage-2,stage-3的理解，可參考https://www.cnblogs.com/chris...，爲了方便，我使用env和stage-0，它包括其它幾個stage
cnpm i babel-preset-env babel-preset-stage-0 -Dwebpack

04：安裝babel插件

好比我想用對象的rest屬性和spread屬性，以下例子git

let { x, y, ...z } = { x: 1, y: 2, a: 3, b: 4 };

得安裝插件transform-object-rest-spread http://babeljs.io/docs/plugins/transform-object-rest-spread/
cnpm i babel-plugin-transform-object-rest-spread -Dgithub

B: 配置

主要是將上面安裝的預置和插件放到配置文件中
方式一: 單獨的.babelrc文件或.babelrc.jsweb

{
    "presets": [ "env", "stage-0"],
    "plugins": [ "transform-object-rest-spread"]
}

方式二：在項目的package.json中npm

{
  "name": "webpack2017",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "abc": "webpack --config ./build/webpackfile.js",
    "kkkk": "webpack-dev-server --config ./build/webpackfile.js --hot",
    "tttt": "node build/build.js",
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "babel-loader": "^7.1.2",
    "babel-plugin-transform-object-rest-spread": "^6.26.0",
    "webpack": "^3.10.0"
  },
  "babel" :{
    "presets": [ "env", "stage-0"],
    "plugins": [ "transform-object-rest-spread"]
  }
}

vue-loader

因我是用vue開發的，不是react來開發應用的，因此這裏只講vue，在https://webpack.js.org/loader...，vue-loader是第三方加載器，第三方加載器所有入在
https://github.com/webpack-co...，這個加載器是由vue官方維護，地址是:https://github.com/vuejs/vue-...

文檔 : https://vue-loader.vuejs.org/...
代碼託管: https://github.com/vuejs/vue-...
說明1：vue-loader是爲vue服務的，前提是你安裝了vue

1.安裝

url-loader

做用: 對將圖片|視頻音頻|字體進行base64編碼，它有一個參數limit來決定是否要將文件進行base64編碼，當不用編碼時，就調用file-loader進行後續處理
在js文件中直接使用圖片

//下面代碼放在 D:\03www2018\study\webpack2018\today\wang\home.js
//logo.jpg放在 D:\03www2018\study\webpack2018\today\images/logo.jpg  
var imgUrl = require('../images/logo.jpg'),
document.body.innerHTML = '<img src="'+imgUrl+'" />';

上面是webpack的一個頗有用的功能，將圖片看成模塊直接require，若是沒有安裝url-loader會報語法錯

ERROR in ./today/wang/home.js
Module build failed: SyntaxError: D:/03www2018/study/webpack2018/today/wang/home.js: Unexpected token, expected ; (21:8)

在https://webpack.js.org/loaders/下找到url-loader，看看它的用法

01：安裝url-loader，`cnpm i url-loader file-loader -D`

當沒有設limit選項，或設了limit時但圖片的大小小於limit，這兩種狀況纔會將圖片轉爲base64數據，不知足這兩個條件，圖片仍是使用file-loader來處理

01：配置url-loader

{
        test: /\.(png|jpg|gif)$/,
        use: [
          {
            loader: 'url-loader',
            options: {
              limit: 8192
            }
          }
        ]
      }

html-loader

做用：將html文件中圖片`<img src='logo.jpg' />,替換成require(".logo.jpg")的方式導入,如
模板文件中<img src='logo.jpg' data-src123='logo.jpg' /> ，配置文件中{test: /\.html$/, use: {loader: 'html-loader',options: { attrs: [':data-src123']}}} 也就是attrs中的配置與模板中data屬性一致時，會以require()的方式導入圖片，模板中沒有設置相應data屬性的圖片，html-loader忽略，不看成模塊加載，html-loader最後返回的值是這樣的

module.exports = "<!DOCTYPE html><html>  <head>    <meta charset=\"UTF-8\">    <title>大奇模板</title>  </head>  <body> \t<img src='../images/logo.jpg' data-src123='" + require("logo.jpg") + "' />    </body></html>";

file-loader

做用:
參數:

context: 如不配置，就使用全局的context，也就是webpack配置文件對象的context
name: 'huang/img/[name].[hash:7].[ext]'
regExp:
outputPath:'zhangsan/lisi/', //能夠是字符串，也能夠是函數，後面的/不能省
useRelativePath:true|false，是否使用相對路徑

// 最後生成完整文件名是 context+ outputPath + name

必裝loader之eslint-loader

安裝: cnpm i -D eslint eslint-loader
注意：若是同時使用babel-loader和eslint-loader，得先執行eslint-loader，不然會出錯，正確的順序以下

{
        test: /\.js$/,
        exclude: /node_modules/,
        use: [
          "babel-loader",
          "eslint-loader", // 順序是 自底向上執行
        ],
      },

保險的作法是，將eslint單獨配置

{
    test: /\.js$/, // 對js文件使用eslint來檢查代碼的規範
    loader:'eslint-loader',
    enforce: 'pre', // 但爲了保險，建議單獨給eslint-loader指定pre值，有關loader的優先級，參考https://webpack.js.org/configuration/module/#rule-enforce
    include: [path.resolve('src')], // 只有些目錄下的js文件才使用eslint-loader
    options: {
    }
},

eslint配置文件
eslint在執行是會尋找它的配置，它的配置放在哪裏呢？
通常放在package.json的eslintConfig部分，也能夠單獨放在 .eslintrc.*的文件中，如.eslintrc.js
下面以放在package.json中爲例

{
  "name": "webpack2017",
  "devDependencies": {
  },
  "eslintConfig":  {
    "root": true,
    "parserOptions": {
      "sourceType": "module"
    },
    "extends": "standard",
    "env": {
     "browser": true
    },
    "rules": {
      "generator-star-spacing": "off"
    }
  }
}

但放在package.json，不是很方便，建議放在.eslintrc.js中，只要輸出一個對象就行，寫起來比較靈活，如

// https://eslint.org/docs/user-guide/configuring
// 請先安裝本配置文件依賴的模塊,cnpm i -D babel-eslint eslint-plugin-html 
// airbnb規則要裝 cnpm i -D eslint-config-airbnb eslint-plugin-import eslint-plugin-jsx-a11y eslint-plugin-react
// standard規則要裝 cnpm i -D eslint-config-standard eslint-plugin-node eslint-plugin-promise eslint-plugin-standard
// 我我的喜歡standard

module.exports = {
  root: true,
  parser: 'babel-eslint', // 默認的解析器爲espree,這裏指定爲 babel-eslint，參考 https://github.com/babel/babel-eslint
  parserOptions: { // 解析器的選項，默認支持  ECMAScript 5
    sourceType: 'module'
  },
  env: {
    browser: true, // 環境定義爲瀏覽器
  },
  // https://github.com/standard/standard/blob/master/docs/RULES-en.md
  extends: 'standard', // 使用哪一個規則文件，可選 的有standard|airbnb   eslint-config-airbnb(它須要安裝 eslint-plugin-import,eslint-plugin-jsx-a11y, eslint-plugin-react)
  // required to lint *.vue files

  plugins: [ //第3方插件 eslint-plugin-html，
    'html'
  ],
  // add your custom rules here
  rules: {
    // allow async-await
    'generator-star-spacing': 'off',
    // allow debugger during development
    'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off'
  }
}