Webpack

Webpack

是什麼

個人：將一個工程的各種模塊打包成一個或多個bundle文件。（包括css，圖像等），避免瀏覽器多次加載。

入口(entry)

代表webpack從哪個文件作爲起點打包，並根據導入依賴的關係打包其他文件。

module.exports = {
  entry: './path/to/my/entry/file.js'
};

出口(output)

代表webpack將導出的bundle文件放在哪裏，以及起什麼名字。

const path = require('path');

module.exports = {
  entry: './path/to/my/entry/file.js',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'my-first-webpack.bundle.js'
  }
};

loader

loader 讓 webpack 能夠去處理那些非 JavaScript 文件（webpack 自身只理解 JavaScript）。將非js類型的文件（css，less）轉換爲能夠打包的文件。
在更高層面，在 webpack 的配置中 loader 有兩個目標：

• test 屬性，用於標識出應該被對應的 loader 進行轉換的某個或某些文件。
• use 屬性，表示進行轉換時，應該使用哪個 loader。

const path = require(‘path’);

const config = { output: {
filename: ‘my-first-webpack.bundle.js’ }, module: {
rules: [
{ test: /.txt$/, use: ‘raw-loader’ } //表明txt類型文件，使用raw-loader轉換
] } };

module.exports = config;

很多類型的文件需要額外導入loader

插件(plugins)

插件的範圍包括，從打包優化和壓縮，一直到重新定義環境中的變量。插件接口功能極其強大，可以用來處理各種各樣的任務。（不明白）

const HtmlWebpackPlugin = require('html-webpack-plugin'); // 通過 npm 安裝插件
const webpack = require('webpack'); // 用於訪問內置插件

const config = {
  module: {
    rules: [
      { test: /\.txt$/, use: 'raw-loader' }
    ]
  },
  plugins: [
    new HtmlWebpackPlugin({template: './src/index.html'})  //使用插件
  ]
};

module.exports = config;

模式

module.exports = {
  mode: 'production'//development
};

用來決定是否壓縮(生產是壓縮版)。

具體操作

先建立一個空工程，在工程上打開命令行
安裝webpack
命令行 npm init -y （自動生成一個json文件）

命令行npm add webpack webpack-cli -D

webpack可以零配置

建立一個src文件夾，在裏面建立index.js文件。
命令行npx webpack
自動打包並將生成的bundle放在新建立的dist文件夾中

也可以手動配置
建立webpack.config.js配置文件(內容示例)

let path = require('path');

module.exports = {
	mode:'development',  //模式
	entry:'./src/index.js', //入口
	output:{
		filename:'bundle.js',
		path:path.resolve(__dirname,'dist'),  //出口地址（必須絕對路徑）
	}
}

如此便按照配置的屬性打包。

webpack本地服務器
webpack-dev-server 爲你提供了一個簡單的 web 服務器，並且能夠實時重新加載。
安裝webpack-dev-server
命令行 npm add webpack-dev-server -D
運行服務器(打包到內存中)
命令行 npx webpack-dev-server
如此可在http://localhost:8080/中訪問內存中的文件
配置webpack本地服務器

webpack.config.js配置文件中加一個
devServer:{
contentBase: './build'，//更改載入內存的文件
port:3000  ,    //更改端口號
progress:true
},

pack.json中的srcript中加上

"dev":"webpack-dev-server"//簡寫

命令行 npm run dev
如此訪問http://localhost:3000/只能看到build文件夾。
因爲沒有index.html文件，因而會顯示

Cannot GET /

插件使用
爲了自動打包src中的html文件，我麼要使用html插件
先安裝插件
命令行npm add html-webpack-plugin -D
修改webpack.config

let HtmlWebpackPlugin = require('html-webpack-plugin');
plugins:[    //放置要用的插件
		new HtmlWebpackPlugin({
			template:'./src/index.html',
			filename:'index.html'
		})
	]

如此html便會被一起打包（若要壓縮使用minify屬性），運行服務器時便會自動渲染打包的index.html頁面。

loader使用
樣式打包
爲了使css作爲單獨的模塊被打包（link不行），需要在index.js導入以建立依賴關係。

require('./index.css');

安裝css和style的loader
命令行npm add css-loader style-loader -D
修改webpack.config

module:{
		rules:[
			//css-loader 解析css語法，style-loader負責把css插入head中
			{test:/\.css$/,use:['style-loader','css-loader']}//user中的loader從右向左執行
		]
	}

這樣寫可以更改style插入位置爲頂部（使優先級低於原頁面style標籤）

module:{
		rules:[
			{test:/\.css$/,use:[
			  {
				loader:'style-loader',
				options:{
					insertAt:'top'
				}
			},'css-loader']}
		]

若要將樣式模塊單獨導出爲css文件，並用link引入html，需要引用插件
安裝此插件 命令行npm add mini-css-extract-plugin -D
修改webpack.config

let MiniCssExtractPlugin = require('mini-css-extract-plugin');
new MiniCssExtractPlugin({
			filename:'main.css'    //導出的css文件名
		})
rules:[
            {test:/\.css$/,use:[
				MiniCssExtractPlugin.loader,
				'css-loader']}
		]

babel

將es6語法轉換爲es5使用babel-loader
安裝要用的loader
命令行 npm add babel-loader @babel/core @babel/preset-env -D
修改webpack.config

{
				test:/\.js$/,
				use:{
					loader:'babel-loader',
					options:{//用babel-loader需要把es6轉換成es5
						presets:[
							'@babel/preset-env'
						]
					}
				},exclude:/node_modules/ //防止對每個js文件轉換
			}

用class還要添加babel插件的，實例的高級方法也要添加插件