Webpack(開發、生產環境配置)

Webpack簡介

1.webpack定義
webpack靜態資源打包器，前端所有資源（js/css/json/img/less…）作為模組處理，打包生產對應的boundle

2.webpack五大核心
Entry Output Loader Plugins Mode

Webpack初體驗

src：初始資料夾 dist：打包之後的資料夾

（1）初始化package.json npm init
（2）下載安裝webpack （全域性）npm install webpack webpack-cli -g
本地安裝（專案內）npm install webpack --save-dev
（3）編譯打包 webpack ./src/index.js -o dist/bundle.js --mode=development

webpack以./src/index.js為入口檔案開始打包，打包後輸出至./dist/bundle.js

結論：
1.webpack能處理js和json檔案，不能處理css/img等檔案
2.生產/開發環境將ES6模組化編譯成瀏覽器能識別的模組；能壓縮程式碼
3.生產環境比開發環境多一行壓縮js程式碼

• 1、webpack打包樣式資源
  webpack.config.js webpack配置檔案
  作用：執行webpack指令，載入裡面的配置
  1)建立檔案
  
  2）下載安裝loader包
  npm install css-loader style-loader less-loader less -D

3）修改配置檔案webpack.config.js

// resolve 拼接絕對路徑的方法
const {resolve} = require('path')

module.exports = {
    // 指定構建模式 development  / production
    mode: 'development',

    // 配置打包的入口entry和出口output
    entry: path.join(__dirname, './src/index.js'),


    output: {
    //__dirname  node.js變數 代表當前檔案的目錄絕對路徑
        path: path.join(__dirname, './dist'), //輸出檔案的存放路徑
        filename: 'bundle.js' //輸出檔名稱
    },

    // 向外暴露配置的物件
    plugins: [htmlPlugin, new VueLoaderPlugin()],

    // 配置自動打包相關引數
    /*  "script": {
        host IP地址  port埠號
         "dev": 'webpack-dev-server --open --host 127.0.0.1 --port 8888'
     } */

	// loader的配置
    module: {
        rules: [
        // test 匹配哪些檔案  use使用哪些loader進行處理
        // use陣列中執行順序：從下到上、從右到左
            { test: /\.css$/, use: ['style-loader', 'css-loader', 'postcss-loader'] },
            { test: /\.less$/, use: ['style-loader', 'css-loader', 'less-loader'] },
            { test: /\.jpg|png|gif|bmp|ttf|eot|svg|woff|woff2$/, use: "url-loader?limit=16940" },
            { test: /\.vue$/, loader: "vue-loader" }
        ]
    },

    devtool: "inline-source-map"
}

/* 所有構建工具基於node.js平臺執行，模組化預設採用common.js*/
style-loader：建立style標籤，將js中的樣式資源插入執行，新增至head中生效
css-loader：將css檔案變成common.js模組載入js，裡面內容是樣式字串
less-loader：將less檔案編譯成css檔案

4）執行指令：webpack

• 2、打包html資源
  1）下載安裝plugin包
  npm install --save-dev html-webpack-plugin

2)修改配置檔案

const HtmlWebpackPlugin = require('html-webpack-plugin')
module.exports ={
	entry:'./src/index.js'
	output:{filename:'bundle.js',path:resolve(__dirname,'dist)}
	module:{
		rules:[//loader]
	}
	plugins:[
	//html-webpack-plugin:預設建立一個html，自動引入打包輸出的所有資源js/css
	//複製./src/index.html檔案
	new HtmlWebpackPlugin({template:'./src/index.html'})
	]

• 3、打包圖片資源
  1）下載安裝loader包
  npm install --save-dev html-loader url-loader file-loader
  2)修改配置檔案

module:{
	rules:[
	{test:/\.less$/,use:['html-loader'，'url-loader' ，'file-loader']},
	//  處理html中的img圖片
	{test:/\.(jpg|png|img)/,loader:'url-loader',options:{
		limit:8*1024,
		esModule:false, // 關閉url-loader的es6模組化，使用common.js解析
		name:'[hash:10].[ext]'
	}},
	// 引入img，被url-loader處理
	{test:/\.html$/,use:['html-loader']}
	
	]
}

• 4、打包其他資源

1）修改配置檔案

module:{
	rules:[
	{test:/\.css$/,use:['style-loader'，'css-loader']},
	//  
	{exclude:/\.(html|js|css|img|less)$/,
	loader:'file-loader',
	options:{
	name:'[hash:10].[ext]'
	}},
	
	
	]
}

• 5、devServer
  1）修改配置檔案

module.exports = {
	devServer:{
	// 專案打包構建後的目錄
		contentBase:resolve(__dirname,'dist')
		// gzip壓縮
		compress:true,
		// 埠號
		port:3000,
		// 自動開啟瀏覽器
		open:true
	}
}

2）執行指令 npx webpack-dev-server

• 6、開發環境配置

1）修改配置檔案

module.exports={
	entry:
	output:{}
	module:{rules:[//loader配置]}
	plugins:[]
	mode='development'
	
}

webpack生產環境

• 「1」提取css單獨檔案
  1）下載外掛
  npm install --save-dev mini-css-extract-plugin
  2）修改配置檔案

const MiniCssExtractPlugin = require('mini-css-extract-plugin')
module:{rules:[
{test:/\.css/,use:[

		MiniCssExtractPlugin.loader, // 取代style-loader，提取js中的css成單獨檔案
		'css-loader'
]}]}
plugins:[
new MiniCssExtractPlugin({
	filename:'css/bundle.css'
})
]

• 「2」css相容性處理
  1）下載外掛
  npm install --save-dev postcss-loader postcss-preset-env
  2）修改配置檔案

// 設定 nodejs 環境變數 
// process.env.NODE_ENV = 'development';
module: { 
	rules: [{
**加粗樣式**	test:/\.css$/,
	use:[MiniCssExtractPlugin.loader,'css-loader',{
	loader:'',
	options:{
		ident:'postcss-loader',
		plugins:()=>[// postcss 的外掛 require('postcss-preset-env')()]
			
		}
	}]
}]

3）修改package.json檔案

"browserslist": {
 "development": [ "last 1 chrome version", "last 1 firefox version", "last 1 safari version" ],
 "production": [ ">0.2%", "not dead", "not op_mini all" ] }

• 「3」壓縮css
  1）下載安裝包
  npm install --save-dev optimize-css-assets-webpack-plugin
  2）修改配置檔案

const OptimizeCssAssetsWebpackPlugin = require('optimize-css-assets-webpack-plugin' )
plugins: [
	// 壓縮 css
	 new OptimizeCssAssetsWebpackPlugin()
	]

• 「4」語法檢查
  1）下載安裝包
  npm install --save-dev eslint-loader eslint eslint-config-airbnb-base eslint-plugin-import
  2）修改配置檔案

module: { 
/*語法檢查： eslint-loader eslint 
	設定檢查規則：
	 package.json 中 eslintConfig 中設定~ "eslintConfig": { "extends": "airbnb-base" }
	airbnb --> eslint-config-airbnb-base eslint-plugin-import eslint
*/
	rules: [
	{	test:/\.js$/,
		exclude:/node_modules/,
		loader: 'eslint-loader',
		options: { // 自動修復 eslint 的錯誤 
		fix: true }
	}
]

3）配置package.json

"eslintConfig": { 
	"extends": "airbnb-base", 
	"env": { "browser": true }
 }

• 「5」js相容性處理
  1）下載安裝包
  npm install --save-dev babel-loader @babel/core @babel/preset-env @babel/polyfill core-js
  2）修改配置

module: { rules: [ { test: /\.js$/, 
exclude: /node_modules/,
 loader: 'babel-loader',
  options: { 
  // 預設：指示 babel 做怎麼樣的相容性處理
   presets: [ 
   [ '@babel/preset-env', {
   // 按需載入 
   useBuiltIns: 'usage', 
   // 指定 core-js 版本 
   corejs: { version: 3 },
   // 指定相容性做到哪個版本瀏覽器
    targets: { chrome: '60', firefox: '60', ie: '9', safari: '10', edge: '17' } } ] ] } } ] },

• 「6」js壓縮
  1）修改配置檔案

// 生產環境下會自動壓縮 js 程式碼
 mode: 'production'

• 「7」html壓縮
  1）修改配置檔案

plugins: [ 
new HtmlWebpackPlugin({ 
template: './src/index.html', 
// 壓縮 html 程式碼 
minify: { 
// 移除空格 
collapseWhitespace: true, 
// 移除註釋 
removeComments: true } }) ]

• 「8」生產環境配置
  1）修改配置檔案

// 定義 nodejs 環境變數：決定使用 browserslist 的哪個環境 
process.env.NODE_ENV = 'production';

// 複用 loader 
const commonCssLoader = [ 
MiniCssExtractPlugin.loader, 'css-loader', { 
// 還需要在 package.json 中定義 browserslist 
loader: 'postcss-loader', 
options: { 
	ident: 'postcss', 
	plugins: () => [require('postcss-preset-env')()] } } ]


module: { 
rules: [ 
{ test: /\.css$/, use: [...commonCssLoader] },
{ test: /\.less$/, use: [...commonCssLoader, 'less-loader']，
{
// 在 package.json 中 eslintConfig --> airbnb 
test: /\.js$/, exclude: /node_modules/, 
// 優先執行 
enforce: 'pre', 
loader: 'eslint-loader', options: { fix: true }},
{ test: /\.js$/, exclude: /node_modules/, loader: 'babel-loader', 
options: { 
presets: [ 
[ '@babel/preset-env', 
{ useBuiltIns: 'usage', corejs: {version: 3}, targets: { chrome: '60', firefox: '50' } } ] ] } }
{ test: /\.(jpg|png|gif)/, loader: 'url-loader', options: { limit: 8 * 1024, name: '[hash:10].[ext]', outputPath: 'imgs', esModule: false }
 ],
plugins: [ 
	new MiniCssExtractPlugin({ filename: 'css/built.css' }), 
	new OptimizeCssAssetsWebpackPlugin(), 
	new HtmlWebpackPlugin({ 
	template: './src/index.html', 
	minify: { collapseWhitespace: true, removeComments: true } }) ],