webpack

webpack的基本操作

打包就是把多有東西打到一個文件中，這個文件就是所謂的包

1.webpack的基本配置

1. 常用的基本選項配置

• entry:入口 打包到額入口文件
• output:出口配置 打包到哪裏
  • path:打包文件輸出所在的目錄
  • filename:打包文件的名字
• loader:轉換器，主要是對文件進行轉換的
• plugin:插件，主要作用在打包的過程中，不直接操作文件
• resolve:配置額外的選項，比如文件擴展名和別名
  • alias:別名控制
  • extensions:文件擴展名操作(後面附有案例)
• devServer:配置一個web服務器
  • contentBase：服務器打開頁面的所在目錄
  • port：服務器的端口號設置

2. 常用的loader

• style-loader|css-loader
• file-loader|url-loader
• sass-loader

3. 常用的插件
   • html-webpack-plugin:配置頁面模板
   • xxx
     • template:頁面配置模板的位置
4. file-loader與url-loader的區別
   • url-loader支持圖片限制打包成base64
   • file-loader不支持圖片限制打包成base64
5. loaders的讀取規則
   • 如果使用的laoders是數組，loader從右向左開始依次執行
6. loaders和plugins的區別
   • 對於loader，它就是一個轉換器，將A文件進行編譯形成B文件，這裏操作的是文件，比如將A.scss或A.less轉變爲B.css，單純的文件轉換過程；
   • 對於plugin，它就是一個擴展器，它豐富了wepack本身，針對是loader結束後，webpack打包的整個過程，它並不直接操作文件，而是基於事件機制工作，會監聽webpack打包過程中的某些節點，執行廣泛的任務
     7.webpack.config.js配置文件

let path = require('path')
const HtmlwebpackPlugin=require('html-webpack-plugin')
const VueLoaderPlugin = require('vue-loader/lib/plugin')
module.exports = {
	mode:'production',
	entry: './src/main.js',
	output: {
		path:path.resolve(__dirname,'./dist'),
		filename:'main.js'
	},
	module: {
	  rules: [
		  {
			  test: /\.css$/,
			  use: ['style-loader','css-loader']
		  }, 
		  {
			  test: /\.vue$/,
			  use: "vue-loader"
		  }, 
		  {
			  test: /\.(png|jpeg|gif|jpg)$/,
			  use: {
				  loader:'url-loader',
				  options: {
					  limit:6000
				  }
			  }
		  },
		  {
			  test:/.s(c|a)ss$/,
			  use: ['style-loader','css-loader','sass-loader']
		  }
	  ]	
	},
	plugins:[
		new HtmlwebpackPlugin({
			template: './public/index.html'
		}),
		new VueLoaderPlugin()
	],
	// 配置web服務器
	devServer: {
	    contentBase: path.resolve(__dirname, 'dist'),
		port: 9000
	},
	resolve: {
		// 設置別名
		alias: {
			'@': path.resolve('src')// 這樣配置後 @ 可以指向 src 目錄
		},
		extensions: ['.js','.json','.vue']
	}
	
}