新手快速上手webpack4打包工具的使用

水痕001發表於2019-01-27

一直使用webpack,上次也分享過webpack配置es6~9的語法參考連結,但是對於一些小白童鞋來說,最基本的配置都不太知道,剛好利用春節休假期間對webpack4的知識點梳理一次。方便一些剛剛入行的人學習,也是對自己的一種總結與提高

一、幾個盲點的解釋

1、全域性安裝與區域性安裝
- 對於一般的新手都有一個疑惑我是全域性安裝還是本專案中安裝(區域性安裝),個人建議,現在前端發展那麼快,我們使用區域性安裝的方式更好(使用最新的技術棧)。
- 我們知道javascript是弱語言,有區域性變數和全域性變數,其實全域性安裝與區域性安裝的性質與函式的全域性變數與區域性變數有點類似。
2、安裝包的時候--save與-D的區別
一般我們僅僅是在開發環境依賴的包直接使用-D就可以,這樣就會在專案的package.json檔案中的devDependencies新增相關的配置資訊
```
npm install webpack webpack-cli -D
複製程式碼
```
--save是會放在package.json檔案的dependencies中
記住僅僅是開發環境需要使用的包就使用-D

二、`webpack`所謂的0配置使用

webpack是基於配置的前端腳手架,在實際專案中開發需要配置你需要的外掛與載入器。

1、webpack最基本的基重要的是:
plugins:配置外掛的
module:主要配置一些載入器
2、初始化專案
建立一個資料夾webpack-demo
初始化生成package.json檔案
```
npm init --yes
複製程式碼
```

3、安裝webpack最基本的依賴包

npm install webpack webpack-cli -D
複製程式碼

4、建立一個資料夾src並在裡面建立一個index.js的檔案
5、在命令列中執行(先忽視警告資訊)
```
npx webpack
複製程式碼
```
6、在生成的dist資料夾下會生成一個大包好的main.js檔案,在該資料夾下建立一個index.html檔案引入main.js,在瀏覽器中檢視控制檯是否輸出資訊。

二、`webpack`的配置

1、在專案下建立一個webpack.config.js檔案

2、可以配置的有

const path = require('path');

module.exports = {
  entry: '',  // 打包檔案的入口
  output: {}, // 打包後的出口檔案配置
  devServer: {}, // 開發伺服器
  module: {}, // 模組配置
  plugins: {}, // 外掛的配置
  mode: 'development', // ['development', 'production']模式
  resolve: {}, // 配置解析
}
複製程式碼

三、配置開發環境(在記憶體中打包)

1、安裝包

npm install webpack-dev-server -D
複製程式碼

2、在webpack.config.js中配置入口檔案與出口檔案

module.exports = {
  entry: './src/index.js',  // 打包檔案的入口
  output: {
    filename: 'build.js',
    // 注意這個位置必須是絕對路徑
    path: path.join(__dirname, 'dist')
  },
  ...
}
複製程式碼

3、配置開發devServer

module.exports = {
  ...
  devServer: {
    contentBase: path.join(__dirname, 'dist'),
    port: 8000,
    compress: true, // 自動壓縮
    open: true, // 自動開啟瀏覽器
  },
}
複製程式碼

4、在package.json中配置命令

...
"scripts": {
	"dev": "webpack-dev-server",
},
...
複製程式碼

5、除錯性的執行命令(會自動開啟瀏覽器,但是裡面沒任何資訊展示)
```
npm run dev
複製程式碼
```

6、使用html-webpack-plugin自動生成html頁面的外掛

1.安裝包

npm install html-webpack-plugin -D
複製程式碼

2.在webpack.config.js中引入

const HtmlWebpackPlugin = require('html-webpack-plugin');
複製程式碼

3.在plugins中配置

plugins: [
	new HtmlWebpackPlugin({
		template: './src/index.html',
		title: 'webpack測試',
	})
],
複製程式碼

4.關於index.html的內容

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title><%=htmlWebpackPlugin.options.title%></title>
</head>

<body>

</body>

</html>
複製程式碼

5.關於html-webpack-plugin的配置請檢視
6、執行npm run dev直接開啟瀏覽器,開啟控制檯可以檢視到列印資訊

7、建立打包命令(在package.json中新增命令)

"scripts": {
	"dev": "webpack-dev-server",
	"build": "webpack"
},
複製程式碼

8、使用雜湊值的方式建立隨機生成數字,解決快取的問題

1、對生成的js檔案生成隨機數

output: {
	filename: 'build.[hash].js', // 預設生成20位的雜湊值
	// filename: 'build.[hash:8].js' 可以定製生成多少位的隨機數
	// 注意這個位置必須是絕對路徑
	path: path.join(__dirname, 'dist')
},
複製程式碼

2、對html裡面引入的js生成雜湊值(會生成?雜湊值)

plugins: [
	new HtmlWebpackPlugin({
		template: './src/index.html',
		title: 'webpack測試',
		hash: true,
	})
],
複製程式碼

3、執行命令npm run build可以檢視dist資料夾下的檔案是否帶了尾巴(注意點:要更新檔案打包會生成新的,如果沒改動檔案,僅僅是多次打包是一樣的)

4、執行後的效果

<script type="text/javascript" src="build.1ac0ed4b.js?1ac0ed4bfca95df7576e"></script>	
複製程式碼

9、關於html-webpack-plugin其它常用的配置

new HtmlWebpackPlugin({
  ...
  minify: {
    removeAttributeQuotes: true, // 去除雙引號
    collapseWhitespace: true, // 合併程式碼到一行
  }
})
複製程式碼

四、清除之前的`plugin`的外掛的使用

我們對每次打包後的快取檔案進行刪除確保每次都是最新的

1、安裝

npm install clean-webpack-plugin -D
複製程式碼

2、在webpack.config.js中使用

const CleanWebpackPlugin = require('clean-webpack-plugin');
plugins: [
	new CleanWebpackPlugin(['./dist']),
	...
],
複製程式碼

五、關於`webpack`入口檔案的幾種方式

1、單一入口檔案(參考上面)

2、多入口檔案(可以寫成一個陣列),共同打包帶一個出口檔案中

module.exports = {
  mode: 'development',
  entry: [
    './src/index.js',
    './src/a.js'
  ],
  output: {
    filename: 'build.[hash:8].js',
    // 注意這個位置必須是絕對路徑
    path: path.join(__dirname, 'dist')
  }
}
複製程式碼

3、多入口多出口多模板的模式

1.入口檔案與出口檔案的配置

module.exports = {
  mode: 'development',
  entry: {
    index: './src/index.js',
    a: './src/a.js'
  },
  output: {
    filename: '[name].[hash:8].js',
    path: path.join(__dirname, 'dist')
  }
}
複製程式碼

2.模板的配置(需要註明輸出檔案的名字)

...
plugins: [
    new CleanWebpackPlugin(['./dist']),
    new HtmlWebpackPlugin({
      filename: 'index.html', // 註明打包後的檔名
      template: './src/index.html',
      title: 'webpack測試1',
      hash: true,
      chunks: ['index']  // 註明選擇哪個js檔案
    }),
    new HtmlWebpackPlugin({
      filename: 'a.html',
      template: './src/index.html',
      title: 'webpack測試2',
      hash: true,
      chunks: ['a']
    })
  ],
}
...
複製程式碼

六、`webpack`熱更新的使用

1、根據上面的方式我們可以實現,修改js程式碼瀏覽器會重新整理,但是是類似我們人工的重新整理(如果是有狀態機的資料的時候會丟失資料)
2、我們可以使用webpack自帶的一個熱更新的外掛

3、使用方式

1.在webpack.config.js中配置

const webpack = require('webpack');
...
plugins: [
    new webpack.HotModuleReplacementPlugin(),
    ...
]
...
複製程式碼

2.在主要的入口index.js檔案中加上

if (module.hot) {
  module.hot.accept();
}
複製程式碼

七、配置載入`css`樣式的

webpack預設是支援js的,對於別的css或者typescript必須要安裝載入器

1、安裝包

npm install style-loader css-loader less less-loader -D
複製程式碼

2、在webpack.config.js中的module配置規則(use中是一個陣列,從後面解析到前面)

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

3、在src中建立一個css的資料夾,裡面建立a.css和b.less檔案

4、在index.js中引入樣式檔案

import './css/a.css';
import './css/b.less';
複製程式碼

5、啟動服務,檢視瀏覽器Elements欄

八、抽取成單獨的一個樣式檔案

上面的方式雖然可以載入樣式檔案,但是載入出來的全部的以<style type="text/css">....</style>的方式到頁面中,增加了js檔案的體積,如果專案大,可能會造成js檔案過大載入慢,甚至載入不出的弊端。

1、抽取單獨的css目前主要有2個包可以選擇
- 使用外掛extract-text-webpack-plugin@next
- 使用外掛mini-css-extract-plugin(今後取代上面那個外掛的包)

2、安裝包

npm install extract-text-webpack-plugin@next mini-css-extract-plugin -D
複製程式碼

3、使用extract-text-webpack-plugin@next外掛的方式

1.引包

const ExtractTextWebpackPligin = require('extract-text-webpack-plugin');
複製程式碼

2.修改module中的載入器

module: {
    rules: [
      {
        test: /\.css$/,
        use: ExtractTextWebpackPligin.extract({
          use: [
            { loader: 'css-loader' }
          ]
        })
      },
      {
        test: /\.less$/,
        use: ExtractTextWebpackPligin.extract({
          use: [
            { loader: 'css-loader' }, 
            { loader: 'less-loader' }
          ]
        })
      }
    ]
},
...
複製程式碼

3.使用外掛

plugins: [
	...
	new ExtractTextWebpackPligin({
	  filename: 'css/index.css',
	}),
	new HtmlWebpackPlugin({
	  template: './src/index.html',
	  title: 'webpack測試',
	  hash: true,
	  // 先註釋下面的程式碼,更好看結果
	  // minify: {
	  //   removeAttributeQuotes: true, // 去除雙引號
	  //   collapseWhitespace: true, // 合併程式碼到一行
	  // }
	})
],
複製程式碼

4、在index.js中依然是匯入css檔案

import './css/a.css';
import './css/b.less';
複製程式碼

4、使用mini-css-extract-plugin外掛方式

1.導包

const MiniCssTractPlugin = require('mini-css-extract-plugin');
複製程式碼

2.在module中配置

module: {
	rules: [
	  {
	    test: /\.css$/,
	    use: [
	      MiniCssTractPlugin.loader,
	      { loader: 'css-loader' }
	    ]
	  },
	  {
	    test: /\.less$/,
	    use: [
	      MiniCssTractPlugin.loader,
	      { loader: 'css-loader' }, 
	      { loader: 'less-loader' }
	    ]
	  }
	]
},
複製程式碼

3.配置外掛

plugins: [
	...
	new MiniCssTractPlugin({
	  filename: 'css/css.css',
	}),
]
複製程式碼

4.一樣的在index.js中導包
5.測試

九、抽取成多個單獨的樣式檔案

1、導包

const ExtractTextWebpackPligin = require('extract-text-webpack-plugin');
複製程式碼

2、預先例項化兩個輸出檔案的物件

const cssExtract = new ExtractTextWebpackPligin('css/a.css');
const lessExtract = new ExtractTextWebpackPligin('css/b.css');
複製程式碼

3、在module中預先例項化的物件

module: {
	rules: [
	  {
	    test: /\.css$/,
	    use: cssExtract.extract({
	      use: [
	        { loader: 'css-loader' }
	      ]
	    })
	  },
	  {
	    test: /\.less$/,
	    use: lessExtract.extract({
	      use: [
	        { loader: 'css-loader' }, 
	        { loader: 'less-loader' },
	      ]
	    })
	  }
	]
},
複製程式碼

4、配置外掛

plugins: [
    cssExtract,
    lessExtract,
    ...
]
複製程式碼

5、執行命令npm run build檢視

十、關於抽取樣式修改後不重新整理的問題(開發的時候依然是加上`style`中)

1.定義disable

const cssExtract = new ExtractTextWebpackPligin({
  filename: 'css/a.css',
});
const lessExtract = new ExtractTextWebpackPligin({
  filename: 'css/b.css',
});
複製程式碼

2.在modul中使用

module: {
	rules: [
	  {
	    test: /\.css$/,
	    use: cssExtract.extract({
	      fallback: 'style-loader',
	      use: [
	        { loader: 'css-loader' }
	      ]
	    })
	  },
	  {
	    test: /\.less$/,
	    use: lessExtract.extract({
	      fallback: 'style-loader',
	      use: [
	        { loader: 'css-loader' }, 
	        { loader: 'less-loader' },
	      ]
	    })
	  }
	]
},
複製程式碼

十一、關於抽取的時候不引入未使用的樣式來簡單打包後的體積

1、安裝包

npm install purifycss-webpack purify-css glob -D
複製程式碼

2、匯入

const PurifycssWebpack = require('purifycss-webpack');
const glob = require('glob');
複製程式碼

3、使用

...
// 注意必須要在HtmlWebpackPlugin後面使用
new PurifycssWebpack({
  paths: glob.sync(path.resolve('src/*.html'))
})
...
複製程式碼

十二、給`css3`樣式加上字首

1、使用postcss實現該功能

2、安裝包

npm install postcss-loader autoprefixer -D
複製程式碼

3、配置postcss-loader的載入器

...
{
	test: /\.css$/,
	use: cssExtract.extract({
	  fallback: 'style-loader',
	  use: [
	    { loader: 'css-loader' },
	    { loader: 'postcss-loader'},
	  ]
	})
},
...
複製程式碼

4、專案下新建立一個postcss.config.js的配置檔案

module.exports = {
  plugins: [
    require('autoprefixer')
  ]
}
複製程式碼

5、在a.css中寫上css3的樣式

body {
  background: cyan;
  transform:rotate(30deg);
}
複製程式碼

6、執行命令npm run build檢視生成的檔案

十三、關於更多外掛的使用請自己搜尋,只要你能想到的就能搜尋到的

webpack4打包工具
2019-04-15
Web
深度學習框架新手快速上手指南
2022-11-21
深度學習框架
Blocs for Mac：新手也能快速上手的設計軟體
2023-12-14
BloCMac
如何快速上手Mac電腦？mac新手教程 Mac電腦新手必看
2020-09-25
Mac
新手怎麼快速學會並上手SQL語言
2023-02-22
SQL
複習webpack4之使用plugins便捷打包
2019-04-16
WebPlugin
打包工具-Parcel 的使用
2017-12-11
線上主圖設計工具，一分鐘快速上手使用模板！
2023-02-23
最靠譜的6個自媒體平臺，新手也可以快速上手
2022-05-11
快剪輯：可以快速上手的視訊剪輯工具
2018-04-19
Vue嚐鮮快速、零配置的打包工具—parcel~
2019-03-01
Vue
Vue嚐鮮快速、零配置的打包工具---parcel~
2018-01-15
Vue
Redis 快速上手
2019-11-23
Redis
快速上手BootstrapVue
2019-05-08
bootVue
ElasticJob 快速上手
2021-01-19
AST
Flask快速上手
2020-11-18
Flask
JDBC快速上手
2020-09-27
JDBC
docker 快速上手
2022-05-29
Docker
Webpack4新手完全攻略
2018-04-25
Web
webpack4 系列教程(一): 打包JS
2019-02-16
WebJS
使用webpack4 配置按需載入，減小lodash打包體積
2019-02-14
Web
快速上手php：使用PhpStrom部署專案
2015-11-25
PHP
快速上手php：使用PhpStrom除錯php
2015-11-25
PHP除錯
Eclipse快速上手指南之使用JUnit
2013-03-18
Eclipse
複習webpack4之圖片打包
2019-04-11
Web
webpack4 css打包壓縮問題
2018-05-17
WebCSS
Flask之旅: 快速上手
2019-01-20
Flask
Vue框架快速上手
2023-10-02
Vue框架
Masonry介紹與使用實踐：快速上手Autolayout
2015-09-16
快速上手最新的 Vue CLI 3
2019-04-28
Vue
OpenMLDB 新手寶典開發者上手必讀
2023-02-28
快速上手前端框架layui
2019-04-19
前端框架UI
Git和GitHub快速上手
2021-08-21
Github
Docker 快速上手指南
2018-11-28
Docker
Zalando Postgres Operator 快速上手
2022-04-08
快速上手 vue3
2022-02-25
Vue
LLaMA快速上手指南
2023-03-13
Git 快速上手精華梳理
2017-09-16
Git

新手快速上手webpack4打包工具的使用

一、幾個盲點的解釋

二、webpack所謂的0配置使用

二、webpack的配置

三、配置開發環境(在記憶體中打包)

四、清除之前的plugin的外掛的使用

五、關於webpack入口檔案的幾種方式

六、webpack熱更新的使用

七、配置載入css樣式的

八、抽取成單獨的一個樣式檔案

九、抽取成多個單獨的樣式檔案

十、關於抽取樣式修改後不重新整理的問題(開發的時候依然是加上style中)

十一、關於抽取的時候不引入未使用的樣式來簡單打包後的體積

十二、給css3樣式加上字首

十三、關於更多外掛的使用請自己搜尋,只要你能想到的就能搜尋到的

相關文章

二、`webpack`所謂的0配置使用

二、`webpack`的配置

四、清除之前的`plugin`的外掛的使用

五、關於`webpack`入口檔案的幾種方式

六、`webpack`熱更新的使用

七、配置載入`css`樣式的

十、關於抽取樣式修改後不重新整理的問題(開發的時候依然是加上`style`中)

十二、給`css3`樣式加上字首