Webpack學習筆記（二） —— 相關文件處理

處理scss

1. npm i -D node-sass sass-loader 安裝 sass-loader和node-sass
2. webpack.config.js文件中module.exports對象中module模塊rules增加規則

   	module:{
   	      rules:[
   	        //   用style-loader和css-loader處理css文件
   	          {
   	            test:/\.(c|sc|sa)ss$/,
   	            use:[
   	              'style-loader',
   	              'css-loader',
   	               "sass-loader"
   	            ]
   	          }  
   	      ]
   	}
   

   npx webpack命令更改，可以在package.json文件中scripts腳本中增加"bulid":"npx webpack",然後運行npm run build 就可以打包了

css文件提取爲單獨的文件

1. 安裝mini-css-extract-plugin
npm install --save-dev mini-css-extract-plugin
2. webpack.config.js文件中添加

   	// 添加
   	const MiniCssExtractPlugin = require('mini-css-extract-plugin');
   	// module.exports添加
   	module.exports = {
   	    module:{
   	    
   	      rules:[
   	        //   用style-loader和css-loader處理css文件
   	          {
   	            test:/\.(c|sc|sa)ss$/,
   	            use:[        
   	                MiniCssExtractPlugin.loader,
   	             	'css-loader',
   	                "sass-loader", 
   	            ]
   	          },
   	      ],
   	  },
   	    plugins: [
   	        new MiniCssExtractPlugin({
   	            filename: '[name].css',
   	            // 增加hash值
   	            // filename: '[name].[hash].css',
   	            // 保留打包歷史記錄
   	            ignoreOrder:false
   	        })
   	    ],
   	}
   

css和js的壓縮

1. 安裝optimize-css-assets-webpack-plugin
npm install --save-dev optimize-css-assets-webpack-plugin
2. webpack.config.js文件增加

   	var OptimizeCssAssetsPlugin = require('optimize-css-assets-webpack-plugin');
   	module.exports = {
   	    plugins: [
   	    new OptimizeCssAssetsPlugin()
   	    ],
   	}
   

圖片處理

1. 安裝file-loader
npm install file-loader --save-dev
2. webpack.config.js文件中

   	module.exports = {
   	  module: {
   	    rules: [
   	      {
   	        test: /\.(png|jpe?g|gif)$/i,
   	        loader: 'file-loader',
   			options:{
   				// 圖片打包到dist下的images目錄下
   				outputPath:'images',
   				// 保留文件名不變
   				name:'[name].[ext]'
   			}	
   	         
   	      },
   	    ],
   	  },
   	};
   

圖片優化（壓縮）

1. 安裝image-webpack-loader
npm install image-webpack-loader --save-dev
2. webpack.config.js文件中

   	module.exports = {
   	  module: {
   	    rules: [{
   	      test: /\.(gif|png|jpe?g|svg)$/i,
   	      use: [
   	        'file-loader',
   	        {
   	          loader: 'image-webpack-loader',
   	          options: {
   	            mozjpeg: {
   	              progressive: true,
   	              quality: 65
   	            },
   	            // optipng.enabled: false will disable optipng
   	            optipng: {
   	              enabled: false,
   	            },
   	            pngquant: {
   	              quality: [0.65, 0.90],
   	              speed: 4
   	            },
   	            gifsicle: {
   	              interlaced: false,
   	            },
   	            // the webp option will enable WEBP
   	            webp: {
   	              quality: 75
   	            }
   	          }
   	        },
   	      ],
   	    }]
   	  }
   	}
   

圖片base64優化

1. 安裝url-loader
npm install url-loader --save-dev
2. webpack.config.js文件中

   	module.exports = {
   	  module: {
   	    rules: [
   	      {
   	        test: /\.(png|jpg|gif)$/i,
   	        
   	        use: [
   	          // file-loader
   	          // url-loader可以替換file-loader
   	          {
   	            loader: 'url-loader',
   	            options: {
   	              limit: 8192,
   	            },
   	          },
   	          {
   	            loader: 'image-webpack-loader',
   	            options: {
   	              mozjpeg: {
   	                progressive: true,
   	                quality: 65,
   	              },
   	              // optipng.enabled: false will disable optipng
   	              optipng: {
   	                enabled: false,
   	              },
   	              pngquant: {
   	                quality: [0.65, 0.90],
   	                speed: 4,
   	              },
   	              gifsicle: {
   	                interlaced: false,
   	              },
   	              // the webp option will enable WEBP
   	              webp: {
   	                quality: 75,
   	              },
   	            },
   	          
   	          },
   	          
   	        ],
   	      },
   	    ],
   	  },
   	};
   

js啓用babel轉碼

1. 安裝babel-loader
npm i -D babel-loader babel-core babel-preset-env

2. webpack.config.js 文件

   module: {
     rules: [
       {
         test: /\.m?js$/,
         exclude: /(node_modules|bower_components)/,
         use: {
           loader: 'babel-loader',
           options: {
             presets: ['@babel/preset-env']
           }
         }
       }
     ]
   }