webpack

webpack

網(wǎng)絡打包工具

在項目中安裝就去掉global

yarn global add webpack

yarn global add webpack-cli

webpack --version

打包npm run build

在webpack中，只會打包壓縮js文件，如果有css等其他文件，那么必須要依賴包，安裝完成后需要在webpack.config,js進行配置

用插件的話實例化就行了。例如清理器等

需要創(chuàng)建src文件夾和index.js

默認的入口文件是src/index.js

打包命令

webpack -w --mode production    //壓縮
webpack -w --mode development  //不壓縮

如果是在項目中安裝的話

**package.json
//在此文件下進行自定義更改命令，在項目目錄打開命令行，執(zhí)行yarn run build 就會執(zhí)行此行代碼，即打包項目
  "scripts":{
    "build":"webpack"
  }

通過打包壓縮 ，出口在dist/main.js

打包的好處之一：壓縮體積減少http的請求次數(shù)，優(yōu)化性能之一

在項目組配置webpack文件

創(chuàng)建和src同級文件：

**webpack.config.js
const path = require('path')
module.exports={
    // 入口文件
    entry:'./src/index.js',
    // 出口文件
    output:{
        //__dirname，根據(jù)當前目錄和dist生成絕對路徑
        path:path.resolve(__dirname,'dist'),
        // 打包后的文件名字 
        filename:'main[hash:8].js'
    },
}

下載css包

//引入時注意
yarn add style-loader
yarn add css-loader

配置loader

module:{
    rules:[
        {
            // 正則，以.xxx結尾的文件
            "test":/\.css$/, 
            // 使用xxxloader
            use:["style-loader","css-loader"]
        }
    ]
}

下載清理器mian.js

const { CleanWebpackPlugin } = require('clean-webpack-plugin');
plugins:[
    new CleanWebpackPlugin(),
]

清理完成后dist里的mian.js每更改一次，名字就會變化，那么每次都需要重新引入，所以需要下載自動引入

yarn add html-webpack-plugin

下載，熱更新和自動打開瀏覽器

yarn add webpack-dev-server -w -open

打包圖片

//
yarn add file-loader url-loader

es6轉es5

yarn add babel-loader @babel/preset-env @babel/core

全局安裝webpack

  • webpack是個打包工具，腳手架是基于webpack這個打包工具的
  • webpackjs.com官網(wǎng)
  • webpack --version查看版本 ---4.38 ----現(xiàn)在有webpack5了
  • dist為打包之后的文件
  • 在webpack眼中，靜態(tài)資源都是模塊
  • yarn global add webpack yarn global add webpack-cli 全局安裝
  • yarn add webpack yarn add webpack-cli 局部安裝 【全局和局部都安了，優(yōu)先執(zhí)行全局，想換見'在項目中用webpack'】
  • webpack從4以上的版本，默認的入口文件是src 下的index.js文件
  • 打包操作webpack --mode development 或webpack --mode production
    • 注意：mode是選擇打包模式，development是開發(fā)模式，不壓縮，production是生產(chǎn)模式(上線),是壓縮的
  • 默認出口文件是 dist下的main.js文件
  • webpack -w --mode production加了-w 的可同步文件，不用每次改了文件內容后都重新打包，改了后刷新即可同步文件內容
    • webpack --hot --mode production也有此作用

在項目中用webpack--局部安裝

全局和局部同時都安了，在項目中想執(zhí)行局部的，可以在項目的package.json中script中輸

【#linux操作系統(tǒng)，是以命令行的為主的操作系統(tǒng)】

#package.json
'script':{
  'test ':"echo hello world "  //運行項目npm test 會出現(xiàn)hello world 
  'abc':"echo hello world " //除了test和start可省略run，否則都是npm run運行項目 //運行npm run abc 會出現(xiàn)hello world
  'bulid':webpack --mode production //打包操作 //一般不寫-w，因此處為打包操作，故不用熱更新 //npm run build 進行打包
 }    //還有一種寫法見【webpack.config.js】
}
#打包操作的好處
1.所有文件打包成了一個文件，按頁面優(yōu)化的規(guī)則，可以減少http的請求次數(shù)，是優(yōu)化的手段之一
2.webpack打包工具可以保證每個js文件是一個獨立的模塊，相當于在瀏覽器中實現(xiàn)模塊化，從而以模塊化開發(fā)做項目，否則瀏覽器本身不直接支持模塊化
  gulp打包在頁面里只引入了一個文件，然后還需要配合require.js等其他文件做模塊化，目前require.js這些已經(jīng)不再升級了，webpack打包工具是主流

webpack基本配置文件---webpack.config.js

  • 默認的webpack 的配置文件名是 webpack.config.js ，可以改，但一般不改！
  • webpack.config.js在根目錄上，和src是平級的
  • webpack.config.js 核心概念(4個):入口，出口，loader，插件
    • loader是加載器，用于加載某一類文件時，做解析用的，即：將除了js文件以外的文件解析成標準的模塊
    • 插件是能對所有文件進行處理，如：清理所有文件、打開服務器增加某項功能等
    • 入口是src 下的index.js文件
    • 出口是 dist下的main.js文件
#webpack.config.js
const path=require('path') //不能用import 這是node環(huán)境，不支持es6的模塊化
module.exports={
  entry:'./src/index.js',   //entry入口文件
  output:{                 //output出口文件,下面的對象表示指定某目錄下的某文件為出口文件
    path:path.resolve(__dirname,'dist'),  //dirname是當前目錄  //path.resolve生成絕對路徑
    filename:'main[hash:8].js' //為了避免文件緩存，hash8用于產(chǎn)生8位的hash碼，加在main文件名后-->文件名帶了hash碼每次build會生成文件名不同的文件，不便于引入文件時寫名字-->自動將改了的文件在引入處進行文件名修改&將舊文件清理的 插件和操作見下面
  }
}
#index.html
//在index.html引入出口文件以應用
<script serc="dist/main.js"></script>

--->自動將舊文件清理 
1.安裝插件 yarn add clean-webpack-plugin
2.webpack.config.js引入插件并使用
const { CleanWebpackPlugin } = require('clean-webpack-plugin'); 
plugins:[
        new CleanWebpackPlugin()
    ]
--->自動將改了的文件引入
1.安裝插件 yarn add html-webpack-plugin
2.webpack.config.js引入插件并使用   //一定要先將index.html中<script>去掉！
const HtmlWebpackPlugin = require('html-webpack-plugin');
plugins:[
        new CleanWebpackPlugin(),
        new HtmlWebpackPlugin({template: './index.html'})
    ]

#此為單入口和單出口，webpack支持多入口和多出口，見官網(wǎng)

【另外】
在package.json中可以不指定打包模式
#package.json
'script':{
  'bulid':webpack
 }
在webpack.config.js中指定打包模式
#webpack.config.js
mode:'production'  或  mode:'development'  //可以指定打包模式

【完整寫法如下】
#webpack.config.js
const path = require("path");
const { CleanWebpackPlugin } = require('clean-webpack-plugin');
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
    entry:'./src/index.js',
    output:{
        path:path.resolve(__dirname,'dist'),
        filename:'main[hash:8].js'
    },
    mode:'development',
    devServer:{
       contentBase:'dist',
       inline:true
    },
    module:{
        rules:[
            {
                "test":/\.css$/,
                use:[
                      { loader: 'style-loader' },
                      { loader: 'css-loader' }
                    ] 

            }
        ]
    },
    plugins:[
        new CleanWebpackPlugin(),
        new HtmlWebpackPlugin({template: './index.html'})
    ]

}

webpack-dev-server --支持熱更新！不用手動刷新

yarn add webpack-dev-server

  • 會自動打開8080端口
#package.json
'script':{
   'build':"webpack"
   'serve':"webpack-dev-server -w --open"        //-w 同步文件 --open自動打開瀏覽器
}

#webpack.config.js
devServer：{
  contentBase:'dist'    //默認的目錄
  inline:true         //開啟熱更新
}

使用loader文件打包---非js文件的打包

  • 如果不是js文件，需要各種loader文件用于打包

打包CSS文件

打包css文件需要style-loader 和css-loader

  • yarn add style-loader css-loader【注意：此處引入是有順序的！】
  • 需要配置以下
#webpack.config.js
const path=require('path') 
module.exports={        
  entry:'./src/index.js',   
  output:{                 
    path:path.resolve(__dirname,'dist'),  
    filename:'main[hash:8].js' 
  },
  module:{        //loader加載的是模塊module，roules是模塊的規(guī)則，每個規(guī)則是一個對象，什么的模塊用什么去解析
      rules:[
        { test: /\.css$/,         //什么的模塊
          use: [                    //用什么去解析
                  { loader: 'style-loader' },
                  { loader: 'css-loader' }
                ]       
        }   
      ]
  }
}         
}

打包圖片文件

  • 打包圖片文件需要style-loader 和css-loader

  • yarn add file-loader url-loader

  • 需要配置以下

    #webpack.config.js 寫在module的rules里面 
rules:[
         {
          test: /\.(png|jpg|gif)$/i,
          use: [
            {
              loader: 'url-loader',
              options: {
                limit: 8192,  //比8192小的就base64編碼打包到js中，比8192大的就單獨打包到一個文件
              }
            },
          ],
        }    
      ]

es6轉es5

  • 打包圖片文件需要babel-loader 和@babel/core 和@babel/preset-env

  • yarn add babel-loader @babel/core @babel/preset-env

  • 需要配置以下

    #webpack.config.js 寫在module的rules里面 
rules:[
        {
          test: /\.js$/,
          exclude: /node_modules/,     //一定要排除module
          use: {
            loader: 'babel-loader',
            options: {
                presets: ['@babel/preset-env','@babel/preset-react']
             }
           }
]

配React環(huán)境

  • 配React環(huán)境需要react 和react-dom 和@babel/preset-react

yarn add react react-dom @babel/preset-react

配Vue環(huán)境

  • 配Vue環(huán)境需要vue 和vue-loder 和vue-template-complile

yarn add vue vue-loder vue-template-complile

?著作權歸作者所有,轉載或內容合作請聯(lián)系作者
【社區(qū)內容提示】社區(qū)部分內容疑似由AI輔助生成，瀏覽時請結合常識與多方信息審慎甄別。
平臺聲明：文章內容（如有圖片或視頻亦包括在內）由作者上傳并發(fā)布，文章內容僅代表作者本人觀點，簡書系信息發(fā)布平臺，僅提供信息存儲服務。

相關閱讀更多精彩內容

友情鏈接更多精彩內容