webpack 入門筆記

什麼是Webpack

webpack 能夠看作是模塊打包機, 主要能夠作到以下內容

• 代碼轉換：TypeScript 編譯成 JavaScript、SCSS 編譯成 CSS 等。
• 文件優化：壓縮 JavaScript、CSS、HTML 代碼，壓縮合並圖片等。
• 代碼分割：提取多個頁面的公共代碼、提取首屏不須要執行部分的代碼讓其異步加載。
• 模塊合併：在採用模塊化的項目裏會有不少個模塊和文件，須要構建功能把模塊分類合併成一個文件。
• 自動刷新：監聽本地源代碼的變化，自動從新構建、刷新瀏覽器。
• 代碼校驗：在代碼被提交到倉庫前須要校驗代碼是否符合規範，以及單元測試是否經過。
• 自動發佈：更新完代碼後，自動構建出線上發佈代碼並傳輸給發佈系統。

目的就是工程化，解放生產力

快速上手

安裝

npm install webpack webpack-cli -D
複製代碼

基本配置文件

const path=require('path');
module.exports={
    mode: ''develepment, // 配置打包環境
    entry: './src/index.js', // 配置入口
    output: { // 配置出口
        path: path.resolve(__dirname,'dist'),
        filename:'bundle.js'
    },
    module: {}, // 配置模塊 loaders
    plugins: [], // 配置插件
    devServer: {}, // 配置開發服務器}
複製代碼

mode

分爲兩個環境，開發環境（develepment）、生產環境（production）

production 相比 develepment, 會在打包是作不少優化。工做中除上線外都用 develepment

entry output

先用最簡單的舉例，單入口單出口

const path = require('path'); //node系統模塊
module.exports={
    //入口配置
    entry: './src/index.js',
    //出口配置
    output:{
        path:path.resolve(__dirname,'dist'), //path必須是絕對路徑
        filename:'bundle.js'
    }
};
複製代碼

entry 入口能夠使用相對路徑，可是output.path 必須使用絕對路徑

entry 能夠是 字符串'./src/index.js'、數組 ['./src/index.js']、對象 {a: './src/index.js'}

若是想出口文件名中包含入口文件名的變量，能夠使用 [name].js

多入口文件

const path = require('path');
	module.exports = {
		entry:['./src/index.js','./src/index2.js'],  //按照順一塊兒打包 bundle.js
		output:{
			path:path.resolve(__dirname, 'dist'),
			filename:'bundle.js'
		}
	};
複製代碼

多入口多出口配置

const path = require('path');
	module.exports = {
		entry:{
			index:'./src/index.js',
			index2:'./src/index2.js'
		},
		output:{
			path:path.resolve(__dirname, 'dist'),
			filename:'[name].bundle.js'
		}
	};
複製代碼

webpack-dev-server

安裝

npm i webpack-dev-server –D
複製代碼

配置 webpack.config.js

devServer:{
       contentBase:path.resolve(__dirname,'dist'),
       host:'localhost',        compress:true,
       port:8080
}
複製代碼

• contentBase 配置開發服務運行時的文件根目錄
• host：開發服務器監聽的主機地址
• compress 開發服務器是否啓動gzip等壓縮
• port：開發服務器監聽的端口

html 模板

安裝 html-webpack-plugin 配置模版

npm i html-webpack-plugin -D
複製代碼

引入

const HtmlWebpackPlugin = require('html-webpack-plugin')
複製代碼

使用

plugins: [
    new HtmlWebpackPlugin({
      template: './public/index.html', // 模版地址
    })
  ],
複製代碼

loaders

loader 有三種寫法

// 第一種
use:['xxx-loader','xxx-loader']
// 第二種
loader:['xxx-loader','xxx-loader']
// 第三種
use:[{loader:'style-loader'},{loader:'css-loader'}]
複製代碼

處理css文件

安裝使用 style-loader css-loader

npm i style-loader css-loader -D
複製代碼

配置

module:{
			rules:[
				{
					test:/\.css$/,
					use:['style-loader','css-loader']
				}
			]
		}
複製代碼

處理js

使用 babel 來編譯 js

舉例編輯 react 項目

安裝使用 babel-loader @babel/core @babel/preset-env @babel/preset-react

npm i babel-loader @babel/core @babel/preset-env @babel/preset-react -D
複製代碼

配置

module: {
    rules: [
      {test: /\.js$/, use: {
        loader: 'babel-loader',
        options: {
          presets: ['@babel/preset-env', '@babel/preset-react'],
        }
      }}
    ],
  },
複製代碼

處理圖片

安裝使用 file-loader url-loader

cnpm i file-loader url-loader -D
複製代碼

配置

{
  test:/\.(png|jpg|gif)$/,
  use:[{
    loader:'url-loader',
    options:{
      limit:50,
      outputPath:'images'
    }
  }]
}
複製代碼

靜態資源輸出

安裝使用 copy-webpack-plugin

npm i copy-webpack-plugin -D
複製代碼

引入

const CopyWebpackPlugin = require('copy-webpack-plugin');
複製代碼

使用

plugins:[
  new CopyWebpackPlugin([{
    from:path.resolve(__dirname, 'src/assets'),
    to:'./public'
  }])
]
複製代碼