webpack基本使用教程

定義：

本質(zhì)上箩祥，webpack 是一個(gè)現(xiàn)代 JavaScript 應(yīng)用程序的靜態(tài)模塊打包器。當(dāng)webpack 處理應(yīng)用程序時(shí)肆氓，它會(huì)遞歸地構(gòu)建一個(gè)依賴關(guān)系圖滥比，其中包含應(yīng)用程序需要的每個(gè)模塊，然后將所有這些模塊打包成一個(gè)或多個(gè) bundle做院。

關(guān)鍵詞：模塊化盲泛，打包

作用

簡化前端開發(fā)工作

核心概念

入口：待打包文件所在路徑
輸出：文件打包后輸出的路徑
加載器（loader）：處理非js資源
插件（plugin）：擴(kuò)展功能

webpack.config.js：

const path = require('path');
const htmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
  entry: path.join(__dirname,'./src/main.js'),  //入口,main.js所在的絕對(duì)路徑
  output: {  //出口
    path: path.join(__dirname,'./dist'),  //main.js的輸出路徑
    filename: 'bundle.js'  //main.js打包后的文件名
  },
  mode: "development",  //開發(fā)模式
  devServer: {  //插件,作用是模擬一個(gè)服務(wù)器，將文件放到服務(wù)器環(huán)境中運(yùn)行
    // contentBase: path.join(__dirname,'./src'),
    open: true,
    port: 3002
  },
  plugins: [  //插件
    new htmlWebpackPlugin({  //作用：將js文件自動(dòng)引入index.html
      template: path.join(__dirname,'./src/index.html')
    })
  ],
  module : {
    rules: [  //加載器
      {test: /\.css$/, use: ['style-loader','css-loader']},//css加載器键耕，從右往左加載
      {test: /\.less$/, use: ['style-loader','css-loader','less-loader']}
    ]
  } 
}

使用步驟

命令行方式配置

1.生成 package.json, 命令 : npm init -y寺滚，注意文件夾名不能為英文或webpack
2.安裝 : npm i -D webpack webpack-cli

-D是--save -dev的簡寫，表示安裝的包是在項(xiàng)目開發(fā)期間使用屈雄，不寫默認(rèn)為在上線期間使用
webpack是指安裝webpack的核心包
webpack-cli包含了一些在終端使用的命令
3.在 package.json的scripts中,添加腳本

"scripts": {
    "build": "webpack main.js"
 },
// webpack 是webpack-cli 中提供的命令, 用來實(shí)現(xiàn)打包的
// ./main.js 入口文件,要打包哪個(gè)文件

4.創(chuàng)建一個(gè)main.js文件

console.log('webpack 的入口文件被打包了');

5.運(yùn)行 : npm run build
6.設(shè)置開發(fā)狀態(tài) : mode

"build" : "webpack ./main.js --mode development"
// 項(xiàng)目開發(fā)的兩種環(huán)境
//1. 開發(fā)環(huán)境 (development) : 開發(fā)過程就是開發(fā)環(huán)境
//2. 生產(chǎn)環(huán)境 (production) : 線上環(huán)境, 也就是 : 項(xiàng)目做好了,發(fā)布上線
//生產(chǎn)環(huán)境下, 打包生產(chǎn)的js文件都是壓縮后的,  開發(fā)環(huán)境下代碼一般是不壓縮的

配置文件方式配置

項(xiàng)目根目錄下, 創(chuàng)建一個(gè) webpack.config.js文件 (文件名固定死)村视，若要專門指定其他文件 : --config webpack.XX.js
在 webpack.config.js 中,進(jìn)行配置

webpack 是基于 node的 , 所以配置文件符合 node 方式書寫配置
注意 : 不要在這個(gè)文件中使用ES6的的模塊化 import語法,main.js里可以使用,是因?yàn)橐ㄟ^webpack轉(zhuǎn)化為es5的,而這個(gè)是webpack的配置文件，是用來轉(zhuǎn)化別的文件的

修改 package.json 中的 scripts , 腳本命令為： "build": "webpack"
執(zhí)行命令 : npm run build
示例代碼

const path = require('path')

module.exports = {
  // 入口
  entry: path.join(__dirname, './src/js/main.js'),
  // 出口
  output: {
    // 出口目錄
    path: path.join(__dirname, './dist'),
    filename: 'bundle.js'
  },
  // 開發(fā)模式
  mode: 'development'
}

配置插件

webpack-dev-server

webpack-dev-server 使用 webpack 必備的功能(插件)

作用 : 為使用 webpack 打包提供一個(gè)服務(wù)器環(huán)境

1.1 自動(dòng)為我們的項(xiàng)目創(chuàng)建一個(gè)服務(wù)器
1.2 自動(dòng)打開瀏覽器
1.3 自動(dòng)監(jiān)視文件變化,自動(dòng)刷新瀏覽器

使用步驟

2.1 安裝 : npm i -D webpack-dev-server
2.2 兩種使用方式: 1-命令行 2-配置文件(推薦)

方式 1 : 命令行配置

3.1 腳本 : "dev" : "webpack-dev-server"
3.2 運(yùn)行到 npm run dev
3.3 查看路徑 : "http://localhost:8080/"

一些問題：

問題 1 : 顯示的只是一些列表 => 只有進(jìn)入 src 才可以顯示頁面

解決 : 想要查看直接進(jìn)入 src 文件 : 添加 --contentBase src

問題 2 : 輸出文件放在根目錄酒奶，所以需要修改引入文件的路徑

解決 : <script src="/bundle.js"></script>

問題 3 : 自動(dòng)打開瀏覽器

解決 : 添加 --open

問題 4 : 指定端口號(hào)

解決 : 添加 --port 3001

問題 5 : 熱更新

package.json里添加--hot

 "scripts": {
    "dev1": "webpack-dev-server --contentBase src --open --port 3001 --hot",
    "build": "webpack "
  },

配置文件配置

// hot 不要寫在配置文件里面,,不然的話還要配其他插件麻煩
 "dev" : "webpack-dev-server --hot",

  devServer: {
    open : true,
    contentBase : path.join(__dirname,'./src'),
    port : 3001
  }

html-webpack-plugin

html-webpack-plugin (必備的插件)

作用 :

能夠自動(dòng)引入js文件
能夠根據(jù)指定的模板文件 (index.html),在內(nèi)存中生成一個(gè)新的 index.html,并且在瀏覽器中打開的頁面,就是該插件在內(nèi)存中生成的頁面
contentBase : path.join(__dirname,'./src'), dev-server 中的這個(gè)也就無效了, 因?yàn)闀?huì)自動(dòng)打開index.html頁面,不需要自己指定了

安裝 : npm i html-webpack-plugin -D
配置

第一步: 引入模塊

const htmlWebpackPlugin = require('html-webpack-plugin')

第二步: 配置

// 插件
plugins: [
  // 使用插件 指定模板
  new htmlWebpackPlugin({
    template: path.join(__dirname, './src/index.html')
  })
]

配置加載器

webpack 只能處理 js 文件,非 js(css.less.圖片.字體等)處理處理不了, 借助 loader 加載器

// loader 加載器
  module: {
    rules: [
      // 1. 處理css
      // 說明 : style-loader 和 css-loader 順序不要換
      // 加載處理的順序就是從后往前
      // css-loader : 處理css文件, 加載成一個(gè)模塊
      // style-loader: 創(chuàng)建style標(biāo)簽,插入index.html. 
      { test: /\.css$/ , use : ['style-loader','css-loader']},
      // 2. 處理 less
      { test: /\.less$/, use: ['style-loader', 'css-loader', 'less-loader'] },
      // 3. 處理圖片
      // base64 這是一種編碼格式, 文件/圖片都可以轉(zhuǎn)化為base64格式,可以在瀏覽器中顯示
      // base64 是一種字符串形式
      // 如果圖片小的話,可以使用 base64 , 如果圖片太大的話轉(zhuǎn)化為base64 反而影響性能
      // { test : /\.(jpg|png|gif)$/, use:['url-loader'] }
      {
        test: /\.(jpg|png|gif)$/, use: [{
          loader: 'url-loader',
          options: {
            // 如果圖片大小 <  limit的值100000 可以轉(zhuǎn)化為base64  url-loader
            // 如果圖片大小 >= limit的值 100000 不要轉(zhuǎn)化為base64  引入本地文件  轉(zhuǎn)化為哈希值(32)  file-loader
            limit : 50000
          }
        }]
      },
      // 處理字體圖標(biāo)
      { test: /\.(eot|svg|ttf|woff|woff2)$/, use: ['url-loader'] },
      
      // 處理es6 的語法
      { test : /\.js$/,use:['babel-loader'], exclude:/node_modules/ }
    ]
  }