webpack從零基礎到企業實戰

webpack從零基礎到企業實戰

webpack.docschina.org/

webpack是一個現代 JavaScript 應用程序的靜態模塊打包器（module bundler）。當 webpack 處理應用程序時，它會遞歸地構建一個依賴關係圖（dependency graph），其中包含應用程序須要的每一個模塊，而後將全部這些模塊打包成一個或多個bundle。

webpack 自己是基於node.js開發的。

從 webpack v4.0.0 開始，能夠不用引入一個配置文件（零配置文件），然而webpack仍然仍是高度可配置的。

1. 安裝webpack

目前*@vue/cli和create-react-app基本上採用的是webpack 4.0以上版本，因此本次課程以第四代版本爲主；第四代版本須要咱們安裝webpack和webpack-cli*（可執行命令）；

爲了防止全局安裝webpack的版本衝突，咱們真實項目開發的時候基本上以安裝在本地項目中爲主；

$ npm init -y
 $ npm install webpack webpack-cli --save-dev
OR
$ yarn add webpack webpack-cli -D
複製代碼

2.webpack的基礎使用

• 初步體驗（零配置）

  /*
   * 默認會打包SRC目錄中的JS文件（入口默認index.js）
   * 打包完成的目錄默認是DIST/MAIN.JS
   *
   * npx:http://www.ruanyifeng.com/blog/2019/02/npx.html
   * 默認執行node_modules/bin/webpack.cmd文件
   * webpack默認支持CommonJS和ES6 Module的模塊規範，依此進行依賴打包
   */
  $ npx webpack
  複製代碼

• 自定義基礎配置

  • webpack.config.js OR webpackfile.js

  let path = require('path');
  module.exports = {
  	//=>打包模式 開發環境development 生產環境production
  	mode: 'production',
  	//=>入口
  	entry: './src/index.js',
  	//=>輸出
  	output: {
  		//=>輸出文件的文件名
  		filename: 'bundle.js',
  		//=>輸出目錄的"絕對路徑"
  		path: path.resolve(__dirname, 'dist')
  	}
  }
  複製代碼

• 自定義配置文件名

  • $ npx webpack --config webpack.config.development.js
  • 可在package.json中配置可執行的腳本命令（區分開發環境）

  "scripts": {
      "serve": "webpack --config webpack.config.development.js",
      "build": "webpack --config webpack.config.production.js"
  },
  複製代碼

3.webpack-dev-server

webpack.js.org/configurati…

• 安裝：$ yarn add webpack-dev-server -D

• 基礎配置

  /* webpack.config.js */
  //=>配置DEV-SERVER
  devServer: {
      //=>端口
  	port: 3000,
      //=>顯示編譯進度
      progress: true,
      //=>指定訪問資源目錄
      contentBase: './dist',
      //=>自動打開瀏覽器
      open: true
  }
  複製代碼

  /* package.json */
  "scripts": {
      "serve": "webpack-dev-server",
      "build": "webpack"
  }
  複製代碼

  • $ npm run serve
  • $ npx webpack-dev-server

• 代碼更改後，會自動從新編譯，而後自動刷新頁面

4.html-webpack-plugin

www.webpackjs.com/plugins/htm…

• 安裝：$ yarn add html-webpack-plugin -D

• 在webpack.config.js中使用

  let HtmlWebpackPlugin = require('html-webpack-plugin');
  module.exports = {
      ...,
      //=>在webpack中使用插件
  	plugins: [
  		new HtmlWebpackPlugin({
  			//=>指定本身的模板
  			template: './src/index.html',
  			//=>輸出的文件名
  			filename: 'index.html',
  			//=>給引入的文件設置HASH戳（清除緩存的），也能夠在output中設置 filename: 'bundle.[hash].js' 來生成不一樣的文件
  			hash: true,
  			//=>控制是否以及以何種方式最小化輸出 
      		//=>https://github.com/kangax/html-minifier
  			minify: {
  				collapseWhitespace: true,
  				removeComments: true,
  				removeAttributeQuotes: true,
  				removeEmptyAttributes: true
  			}
  		})
  	]
  }
  複製代碼

5.webpack中的加載器loader：處理樣式的

• 安裝：$ yarn add css-loader style-loader less less-loader autoprefixer postcss-loader ... -D

• 使用

  module.exports = {
      //=>配置模塊加載器LOADER
  	module: {
  		//=>模塊規則：使用加載器（默認從右向左執行，從下向上）
  		rules: [{
  			test: /\.(css|less)$/, //=>基於正則表達式匹配哪些模塊須要處理
  			use: [
  				"style-loader", //=>把CSS插入到HEAD中
  				"css-loader", //=>編譯解析@import/URL()這種語法
                  "postcss-loader", //=>設置前綴
                  {
  					loader: "less-loader",
                      options: {
                          //=>加載器額外的配置
                      }
  				}
  			]
  		}]
  	}
  }
  複製代碼

  postcss.config.js

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

  package.json

  "browserslist": [
      "> 1%",
      "last 2 versions"
  ]
  複製代碼

6.mini-css-extract-plugin 抽離CSS內容

www.npmjs.com/package/min…

• 安裝 $ yarn add mini-css-extract-plugin optimize-css-assets-webpack-plugin uglifyjs-webpack-plugin -D

let MiniCssExtractPlugin = require('mini-css-extract-plugin'),
	OptimizeCssAssetsWebpackPlugin = require('optimize-css-assets-webpack-plugin'),
	UglifyjsWebpackPlugin = require('uglifyjs-webpack-plugin');
module.exports = {
    //=>設置優化項
	optimization: {
		//=>設置壓縮方式
		minimizer: [
			//=>壓縮CSS（可是必須指定JS的壓縮方式）
			new OptimizeCssAssetsWebpackPlugin(),
			//=>壓縮JS
			new UglifyjsWebpackPlugin({
				cache: true, //=>是否使用緩存
				parallel: true, //=>是不是併發編譯
				sourceMap: true, //=>啓動源碼映射（方便調試）
			})
		]
	},
	plugins: [
		//=>使用插件
		new MiniCssExtractPlugin({
			//=>設置編譯後的文件名字
			filename: 'main.css'
		})
	],
	module: {
		rules: [{
			test: /\.(css|less)$/,
			use: [
				// "style-loader",
				//=>使用插件中的LOADER代替STYLE方式
				MiniCssExtractPlugin.loader,
				"css-loader",
                "postcss-loader",
				"less-loader"
			]
		}]
	}
}
複製代碼

上述JS壓縮對於require/import等還存在問題，須要對於ES6中的一些語法進行處理!

7.基於babel實現ES6的轉換和ESLint語法檢測

babeljs.io/

eslint.org/

• 安裝 $ yarn add babel-loader @babel/core @babel/preset-env @babel/plugin-proposal-class-properties @babel/plugin-proposal-decorators @babel/plugin-transform-runtime -D
• 安裝 $ yarn add @babel/runtime @babel/polyfill
• 安裝 $ yarn add eslint eslint-loader -D

module.exports = {
	...,
	module: {
		rules: [...,{
			test: /\.js$/,
			use: [{
				loader: 'babel-loader',
				options: {
					//=>轉換的語法預設（ES6->ES5）
					presets: [
						"@babel/preset-env"
					],
					//=>基於插件處理ES6/ES7中CLASS的特殊語法
					plugins: [
						["@babel/plugin-proposal-decorators", {
							"legacy": true
						}],
						["@babel/plugin-proposal-class-properties", {
							"loose": true
						}],
						"@babel/plugin-transform-runtime"
					]
				}
			}], //=>, "eslint-loader"
			//=>設置編譯時忽略的文件和指定編譯目錄
			include: path.resolve(__dirname, 'src'),
			exclude: /node_modules/
		}]
	}
}
複製代碼

參考https://eslint.org/demo生成 .eslintrc.json

補充知識：在vscode中開啓ES7中類的裝飾器，項目根目錄中設置 jsconfig.json

{
	"compilerOptions": {
		"experimentalDecorators": true
	}
}
複製代碼

@log
class A{
	a=1;
}
複製代碼

8.暴露全局loader

• $ yarn add expose-loader -D
• 前置加載器、後置加載器、普通加載器...

//=>內聯加載器
import jquery from 'expose-loader?$!jquery';
console.log(window.$);

{
   //=>只要引入JQUERY就在全局注入$
   test: require.resolve('jquery'),
   use: ['expose-loader?$']
}
複製代碼

let webpack = require('webpack');
module.exports = {
    plugins: [
		//=>在每一個模塊中都注入$
		new webpack.ProvidePlugin({
			'$': 'jquery'
		})
	],
}

//=>頁面中
console.log($);
複製代碼

9.webpack中圖片的處理和分目錄分發

• 在JS中建立IMG
• 在CSS中設置背景圖
• 在HTML中寫死
• ...

安裝 $ yarn add file-loader url-loader html-withimg-loader -D

module.exports = {
	...,
	module: {
		//=>模塊規則：使用加載器（默認從右向左執行）
		rules: [..., {
			test: /\.(png|jpg|gif)$/i,
			use: [{
				//=>把指定大小內的圖片BASE64
				loader: 'url-loader',
				options: {
					limit: 200 * 1024,
    				outputPath:'/images'
				}
			}],
			include: path.resolve(__dirname, 'src'),
			exclude: /node_modules/
		}, {
			test: /\.html$/,
			use: ['html-withimg-loader']
		}]
	}
}
複製代碼

最後實現文件分目錄發佈

module.exports = {
	output: {
		//=>配置引用前綴（全部資源前加這個地址）
		publicPath: './'
	},
	plugins: [
		new MiniCssExtractPlugin({
			filename: 'css/main.css'
		})
	],
	module: {
		//=>模塊規則：使用加載器（默認從右向左執行）
		rules: [...,{
			test: /\.(png|jpg|gif)$/i,
			use: [{
				options: {
					outputPath: 'images'
				}
			}]
		}]
	}
}
複製代碼