webpack的簡單使用

webpack

webpack是前端模塊化打包工具，它能讓我們進行模塊化開發，並且會幫助我們處理模塊間的依賴關係。不僅僅是js文件，css、圖片、json文件在webpack中都會被當做模塊來使用

和grunt/gulp對比

• grunt/gulp的核心是Task
  • 我們可以配置一系列的task，並且定義task要處理的失誤（例如es6、ts轉化、圖片壓縮、scss轉成css）
  • 之後讓grunt/gulp來依次執行這些task，而且讓整個流程自動化
  • 所以grunt/gulp也被稱爲前端自動化任務管理工具
• 什麼時候用grunt/gulp
  • 如果工程模塊依賴非常簡單，甚至是沒有用到模塊化的概念
  • 只需要進行簡單的合併、壓縮、就使用grunt/gulp即可
  • 但是如果項目使用了模塊化管理，而且相互依賴非常強，我們就需要使用webpack了
• 不同
  • grunt/gulp更加強調的是前端流程的自動化，模塊化不是它的核心
  • webpack更加強調模塊化開發管理，而文件壓縮合並、預處理等功能，是他附帶的功能

webpack安裝

• 安裝node.js，node自帶了軟件包管理工具npm
  webpack的正常運行，需要依賴各種包，而node.js自帶的npm工具(node packages manager)恰好能提供所需要的包

• 全局安裝webpack（這裏指定版本號3.6.0）
  jsnpm install [email protected] -g

• 局部安裝webpack

–save-dev是開發時依賴，項目打包後就不需要繼續使用
jsnpm install [email protected] --save-dev

• 全局安裝和局部安裝的區別
  • 在終端執行webpack命令，使用的是全局安裝的webpack
  • 當在package.json中定義了scripts時，其中包含了webpack命令，那麼使用的是局部webpack

準備工作

文件和文件夾解析

• dist文件夾：用於存放之後打包的文件
• src文件夾：用於存放我們寫的源文件
  • main.js：項目的入口文件
  • 其它文件
• index.html：瀏覽器打開展示的首頁html
• package.json：通過npm init生成的，npm包管理的文件

webpack的基本使用

將main.js打包
jswebpack ./src/main.js ./dist/bundle.js

webpack.config.js配置和webpack.json

npm init

如果使用依賴
npm install

開發時依賴

css文件打包

webpack會自動處理js之間相關的依賴

如果要處理其它的文件，則需要給webpack拓展對應的loader

loader使用過程
- 通過npm安裝需要使用的loader
npm install --save-dev css-loader
- 在webpack.config.js中的modules關鍵字下進行配置

    module: {
    rules: [
      {
        test: /\.css$/,
        //css-loader只負責文件進行加載
        //style-loader 將模塊的導出作爲樣式添加到 DOM 中
        use: [ 'style-loader', 'css-loader' ]
      }
    ]
}

less文件處理

npm install --save-dev less-loader less

在webpack.config.js中的modules關鍵字下進行配置
這裏將css和lsee文件配置到了一起

{
        test: /\.(css|less)$/,
        //從右向左讀取
        use: ['style-loader', 'css-loader', 'less-loader']
      },

圖片文件的處理

npm install --save-dev url-loader

在webpack.config.js中的modules關鍵字下進行配置

{
   test: /\.(png|jpg|gif|jpeg)$/,
   use: [{
     loader: 'url-loader',
     options: {
       //當加載的圖片，小於limit時，會將圖片編譯成base64字符串形式
       //當加載的圖片，大禹limit時，會使用file-loader模塊進行加載
       limit: 8192,
       name: 'img/[name].[hash:8].[ext]'
     }
   }]
 }

打包後的圖片是一個32位hash值，目的是爲了防止圖片名字重複

爲了將所有打包的圖片放在同一個文件夾需要在options添加如下選項

• img：文件要打包到的文件夾
• name：獲取圖片原來的名字，放在該位置
• hash8：爲了防止圖片名稱衝突，依然使用hash，但只保留8位
• ext：使用圖片原來的拓展名

圖片可能還沒有顯示出來，這是因爲圖片路徑不正確

• 默認情況下，webpack會將生成的路徑直接返回給使用者
• 但是，我們整個程序是打包在dist文件夾下的，所以我們需要在路徑下再添加一個dist/

其它文件的處理

傳送門

webpack環境中集成vue.js

因爲我們後續是在實際項目中也會使用vue，所以並不是開發時依賴

npm install vue --save

import Vue from 'vue'

• runtime-only：代碼中，不可以有任何的template

• runtime-compiler：代碼中，可以有template，因爲compiler可以用於編譯template

這是一種簡單的方法，官網上給的是另外一種方法

搭建本地服務器

webpack提供一個可選的本地服務器，基於node.js搭建，內部使用express框架

npm install --save-dev [email protected]

devserve也是作爲webpack中的一個選項，選項本身可以設置如下屬性：

• contentBase：爲安一個文件夾提供本地服務，默認是根文件夾，這裏填寫./dist

• port：端口

• inline：頁面實時刷新

• historyApiFallback：在SPA頁面，依賴history模式

webpack.config.js文件配置如下

devServer: {
    contentBase: './dist',
    inline: true
}


"dev": "webpack-dev-server --open"

可以再配置另外一個scripts:
- open參數表示直接打開瀏覽器

相關文件

webpack.config.js

const path = require('path');
module.exports = {
  //入口
  entry: './src/main.js',
  //出口
  output: {
    //絕對路徑，動態獲取
    //保存當前路徑
    path: path.resolve(__dirname, 'dist'),
    filename: 'bundle.js',
    // publicPath: 'dist/'
  },
  module: {
    rules: [
      {
        test: /\.(css|less)$/,
        //從右向左讀取
        use: ['style-loader', 'css-loader', 'less-loader']
      },
      {
        test: /\.(png|jpg|gif|jpeg)$/,
        use: [{
          loader: 'url-loader',
          options: {
            //當加載的圖片，小於limit時，會將圖片編譯成base64字符串形式
            //當加載的圖片，大禹limit時，會使用file-loader模塊進行加載
            limit: 8192,
            name: 'img/[name].[hash:8].[ext]'
          }
        }]
      },
      {
        test: /\.js$/,
        exclude: /(node_modules|bower_components)/,
        use: {
          loader: 'babel-loader',
          options: {
            presets: ['es2015'],
            // plugins: [require('@babel/plugin-transform-object-rest-spread')]
          }
        }
      },
      // {
      //   test: /\.(png|jpg|gif)$/,
      //   use: [
      //     {
      //       loader: 'file-loader',
      //       options: {}
      //     }
      //   ]
      // }
      {
        test: /\.vue$/,
        use: [
          'vue-loader'
        ]
      }
    ],

  },
  resolve: {
    extensions: ['.js', '.css', '.vue'],
    //別名
    alias: {
      'vue$': 'vue/dist/vue.esm.js'
    }
  },
  devServer: {
    contentBase: './dist',
    inline: true //是否實時監聽
}
}

main.js

//使用commonjs的模塊化規範
const {
  add,
  mul
} = require('./js/mathUtils.js');

console.log(add(20, 20));
console.log(mul(20, 20));


//ES6的模塊化規範
import {
  name,
  age,
  height
} from './js/info.js'
console.log(name + ' ' + age + ' ' + height);

// 3.依賴css文件
require("./css/normal.css");

//4.依賴less文件
require("./css/special.less");

目錄