webpack資源處理

時間 2019-11-14

標籤 webpack 資源處理简体版

原文原文鏈接

使用上篇已談過，這篇純代碼！！~~javascript

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <!-- <script src="../dist/bundle.js"></script> -->
  <!-- <link rel="stylesheet" href="/node_modules/bootstrap/dist/css/bootstrap.css"> -->
</head>

<body>
  <div class="box"></div>
  <div class="box2"></div>

  <span class="glyphicon glyphicon-heart" aria-hidden="true"></span>
</body>

</html>

{
  "name": "01.webpack-study",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "dev": "webpack-dev-server --open --port 3000 --hot"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "babel-core": "^6.26.0",
    "babel-loader": "^7.1.2",
    "babel-plugin-transform-runtime": "^6.23.0",
    "babel-preset-env": "^1.6.1",
    "babel-preset-stage-0": "^6.24.1",
    "css-loader": "^0.28.7",
    "file-loader": "^1.1.5",
    "html-webpack-plugin": "^2.30.1",
    "less": "^2.7.3",
    "less-loader": "^4.0.5",
    "node-sass": "^4.5.3",
    "sass-loader": "^6.0.6",
    "style-loader": "^0.19.0",
    "url-loader": "^0.6.2",
    "webpack": "^3.8.1",
    "webpack-dev-server": "^2.9.3"
  },
  "dependencies": {
    "bootstrap": "^3.3.7"
  }
}

bable要使用必須加入以下配置：css

{
  "presets": ["env", "stage-0"],
  "plugins": ["transform-runtime"]
}

// 因爲 webpack 是基於Node進行構建的，全部，webpack的配置文件中，任何合法的Node代碼都是支持的
var path = require('path')
// 在內存中，根據指定的模板頁面，生成一分內存中的首頁，同時自動把打包好的bundle注入到頁面底部
// 若是要配置插件，須要在導出的對象中，掛載一個 plugins 節點
var htmlWebpackPlugin = require('html-webpack-plugin')

// 當以命令行形式運行 webpack 或 webpack-dev-server 的時候，工具會發現，咱們並無提供 要打包 的文件的 入口 和 出口文件，此時，他會檢查項目根目錄中的配置文件，並讀取這個文件，就拿到了導出的這個 配置對象，而後根據這個對象，進行打包構建
module.exports = {
  entry: path.join(__dirname, './src/main.js'), // 入口文件
  output: { // 指定輸出選項
    path: path.join(__dirname, './dist'), // 輸出路徑
    filename: 'bundle.js' // 指定輸出文件的名稱
  },
  plugins: [ // 全部webpack  插件的配置節點
    new htmlWebpackPlugin({
      template: path.join(__dirname, './src/index.html'), // 指定模板文件路徑
      filename: 'index.html' // 設置生成的內存頁面的名稱
    })
  ],
  module: { // 配置全部第三方loader 模塊的
    rules: [ // 第三方模塊的匹配規則
      { test: /\.css$/, use: ['style-loader', 'css-loader'] }, // 處理 CSS 文件的 loader
      { test: /\.less$/, use: ['style-loader', 'css-loader', 'less-loader'] }, // 處理 less 文件的 loader
      { test: /\.scss$/, use: ['style-loader', 'css-loader', 'sass-loader'] }, // 處理 scss 文件的 loader
      { test: /\.(jpg|png|gif|bmp|jpeg)$/, use: 'url-loader?limit=7631&name=[hash:8]-[name].[ext]' }, // 處理 圖片路徑的 loader
      // limit 給定的值，是圖片的大小，單位是 byte， 若是咱們引用的 圖片，大於或等於給定的 limit值，則不會被轉爲base64格式的字符串， 若是 圖片小於給定的 limit 值，則會被轉爲 base64的字符串
      { test: /\.(ttf|eot|svg|woff|woff2)$/, use: 'url-loader' }, // 處理 字體文件的 loader 
      { test: /\.js$/, use: 'babel-loader', exclude: /node_modules/ }, // 配置 Babel 來轉換高級的ES語法
    ]
  }
}

// 項目的JS入口文件
console.log('ok')

import './css/index.css'
import './css/index.scss'
// 注意： 若是要經過路徑的形式，去引入 node_modules 中相關的文件，能夠直接省略 路徑前面的 node_modules 這一層目錄，直接寫 包的名稱，而後後面跟上具體的文件路徑
// 不寫 node_modules 這一層目錄 ，默認 就會去 node_modules 中查找
import 'bootstrap/dist/css/bootstrap.css'

// class 關鍵字，是ES6中提供的新語法，是用來 實現 ES6 中面向對象編程的方式
class Person {
  // 使用 static 關鍵字，能夠定義靜態屬性
  // 所謂的靜態屬性，就是 能夠直接經過 類名， 直接訪問的屬性
  // 實例屬性： 只能經過類的實例，來訪問的屬性，叫作實例屬性
  static info = { name: 'zs', age: 20 }
}

// 訪問 Person 類身上的  info 靜態屬性
console.log(Person.info)
// 在 webpack 中，默認只能處理 一部分 ES6 的新語法，一些更高級的ES6語法或者 ES7 語法，webpack 是處理不了的；這時候，就須要 藉助於第三方的 loader，來幫助webpack 處理這些高級的語法，當第三方loader 把 高級語法轉爲 低級的語法以後，會把結果交給 webpack 去打包到 bundle.js 中
// 經過 Babel ，能夠幫咱們將 高級的語法轉換爲 低級的語法
// 1. 在 webpack 中，能夠運行以下兩套 命令，安裝兩套包，去安裝 Babel 相關的loader功能：
// 1.1 第一套包： cnpm i babel-core babel-loader babel-plugin-transform-runtime -D
// 1.2 第二套包： cnpm i babel-preset-env babel-preset-stage-0 -D
// 2. 打開 webpack 的配置文件，在 module 節點下的 rules 數組中，添加一個 新的 匹配規則：
// 2.1 { test:/\.js$/, use: 'babel-loader', exclude:/node_modules/ }
// 2.2 注意： 在配置 babel 的 loader規則的時候，必須 把 node_modules 目錄，經過 exclude 選項排除掉：緣由有倆：
// 2.2.1 若是 不排除 node_modules， 則Babel 會把 node_modules 中全部的 第三方 JS 文件，都打包編譯，這樣，會很是消耗CPU，同時，打包速度很是慢；
// 2.2.2 哪怕，最終，Babel 把 全部 node_modules 中的JS轉換完畢了，可是，項目也沒法正常運行！
// 3. 在項目的 根目錄中，新建一個 叫作 .babelrc  的Babel 配置文件，這個配置文件，屬於JSON格式，因此，在寫 .babelrc 配置的時候，必須符合JSON語法規範： 不能寫註釋，字符串必須用雙引號
// 3.1 在 .babelrc 寫以下的配置：  你們能夠把 preset 翻譯成 【語法】 的意思
        // {
        //   "presets": ["env", "stage-0"],
        //   "plugins": ["transform-runtime"]
        // }
// 4. 瞭解： 目前，咱們安裝的 babel-preset-env, 是比較新的ES語法， 以前， 咱們安裝的是 babel-preset-es2015, 如今，出了一個更新的 語法插件，叫作 babel-preset-env ，它包含了 全部的 和 es***相關的語法



// Java  C#  實現面向對象的方式徹底同樣了，   class 是從後端語言中借鑑過來的， 來實現面向對象
// var p1 = new Person()


// function Animal(name){
//   this.name  = name
// }
// Animal.info = 123

// var a1 = new Animal('小花')

// // 這是靜態屬性：
// // console.log(Animal.info)
// // 這是實例屬性：
// console.log(a1.name)

相關標籤/搜索

每日一句

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