webpack隨手筆記

webpack的做用

webpack是一個前端資源加載/打包工具。他將根據模塊的依賴關係進行靜態分析，而後將這些模塊按照指定的規則生成對應的靜態資源。

webpack的安裝與基本命令

• 安裝命令npm install webpack-cli-g
• 基本使用命令webpack 輸入文件.js -o 輸出文件.js
  • 默認輸出是生產模式，webpack打包的文件是最小的，若是須要打包開發模式則須要設置mode，命令webpack --mode development 輸入文件.js -o 輸出文件.js
  • 若是不設置輸入輸出文件，則會默認在輸入文件是src下的index.js文件，輸出是dist文件下的main.js
• 開發環境命令
  • 當項目逐漸變大，webpack的編譯時間會變長，能夠經過參數讓編譯的輸出內容帶有進度和顏色;命令webpack --progress --colors
  • 若是不想每次修改模板後都從新編譯，那麼能夠啓動監聽模式，沒有變化的模塊編譯後緩存到內存中，而不會每次都從新編譯；命令：webpack --watch

webpack的基礎配置

//打包單個文件
const path = require ('path')
module.exports = {
	entry:'index.js',//入口文件
    output:{
    	path:path.resolve(__dirname,'dist),
        filrname:'output.bundle.js'
    },//出口文件
    mode:'development'//設置開發模式或生產模式
}
//打包多個文件
module.exports = {
	entry:{
    	about:'./about.js',
        home:'./home.js',
    }
    output:{
    path:path.resolve(__dirname,'dist'),
    filrname:[name].bundle.js
    }
}
複製代碼

加載器(loaders)

webpack自己只能處理JavaScript模塊，若是須要處理其餘類型的文件就須要用到loader;loader是用來預處理源文件的，源文件多是ts、less、sass等等。

• url-loader;壓縮編譯圖片，文件的大小低於指定限制時，會返回一個DataUrl

//先安裝file-loader和url-loader
npm install file-loader url-loader
//安裝成功後配置webpack，在webpack.config.js文件中，建立module對象，配置rules
const path = require ('path')
module.exports = {
	entry:'index.js',//入口文件
    output:{
    	path:path.resolve(__dirname,'dist),
        filrname:'output.bundle.js'
    },//出口文件
    mode:'development'//設置開發模式或生產模式
    module:{
    	rules:[
        	{
            	test:/\.(png|gif|jpg)$/i,
                use:[
                	{
                    	loader:'url-loader',
                        options:{
                        	limit:708192
                        }
                    }
                ]
            }
        ]
    }
}
//最後運行打包命令
webpack
複製代碼

• 若是咱們須要在應用中添加css文件，就須要使用到css-loader和style-loader，css-loader會遍歷css文件，而後找到url表達式處理他們，style-loader會把原來的css代碼插入頁面中的一個style中，他們兩個是配合使用的。
  • 安裝css-loader和style-loader、
  • npm install css-loader style-loader
  • 使用css-loader和style-loader

  //先建立一個css文件；
  body{
  	background:yellow
  }
  //建立一個js文件，並引入上面的css文件
  require(!style-loader!css-loader!./style.css)
  //接下來使用命令進行打包
  webpack index.js bundle.js
  
  //咱們也能夠根據模型拓展名來自動綁定loader
  //引入文件時，正常寫
  require('./style.css')
  //打包時輸入時，輸入命令
  webpack index.js bundle.js --module-bind 'css=!style-loader!css-loader'
  複製代碼

• 將es5以上的代碼編譯成es5，更方便瀏覽器識別，使用babel-loader
  • 安裝命令npm install babel-loader@8.0.0-beta.0 @babel/core @babel/preset-env webpack
  • 配置webpack.config.js文件

  複製代碼

{ test:/.(js|jsx)$/, exclude:/(node_modules|bower_components)/,//排除匹配這些文件 use:{ loader:'babel-loader', options:{ presets:['@babel/preset-env'], plugins: [require('@babel/plugin-transform-object-rest-spread')]//設置規則，若是是react則須要編譯jsx 語法，這裏則寫@babel/plugin-transform-react-jsx } } }

- 將less編譯成瀏覽器識別的css
- 安裝命令`npm install style-loader css-loader less-loader`
複製代碼

//先建立一個less文件 body{ color:'#ffffff' } //引入less文件 import cs from './cs.less' //配置文件 { test:'/.less$/, use:[ { loader:'less-loader', }, { loader:'style-loader' }, { loader:'css-loader' } ] } //使用webpack命令進行打包 webapck

# 插件
## miniCssExtractPlugin，將所有的css文件打包到一個css文件中，實現js和css的分離。
- 安裝命令`npm install mini-css-extract-plugin`
複製代碼

//引入配置文件 const MiniCssExtractPlugin = require('mini-css-extract-plugin'); //在module的同級文件下建立plugins數組 plugins：[ new MiniCssExtractPlugin({ filename:'[name].css, chunckFilename:'[id].css' }) ] //而後將less裏的配置進行更改 { test:/.less$/, use:[ MiniCssExtractPlugin.loader, "css-loader", "less-loader" ] } //執行webpack命令，dist文件中會生成一個單獨的css文件

## DefinePlugin，通常用來定義請求的地址的前綴
複製代碼

//配置文件，引入webpack const webpack = reqiure('webpck') //在plugins中建立一個 new webpack.DefinePlugin({ 'SERVICE_URL':'www.sina.com' }) //在home.js文件中更改一下數據 async function sayHello (){ const result = await fetch(SERVICE_URL) console.log(result) } sayHello() //執行一些webpack，去bundle.js查看會發現SERVICE_URL變成了www.sina.com

## HtmlWebpackPlugin用於生成html文件，webpack主要是用來處理js文件的，當須要生成html文件時須要藉助這個插件。
複製代碼

//首先 安裝html插件 npm install html-webpack-plugin -D //接着 配置文件，在plugins中建立一個 new HtmlWebpackPlugin({ title:'Hello world',//項目標題 template:'template.html',//自定義綁定的html，如若沒有定義會自動在dist文件下生成一個html文件 }) //手動建立一個template.html

<%= htmlWebpackPlugin.options.title %>//綁定上面設置的標題 //能夠引進其餘的框架連接

//自定義標籤 ``` ## 熱替換 頁面改變webpack自動打包，頁面實時更新 ``` //首先 安裝devServer插件 npm install webpack-dev-server //其次 在entry同級的文件下建立一個devServer對象，並配置 devServer:{ contentBase:path.join(__dirname,'dist'),//熱替換的文件，這裏的參數和entry必須保持一致 compress:true,//是否壓縮 hot:true,//開啓熱替換 port:8080,//熱替換的端口號 }

複製代碼