webpack踩坑記錄（一）處理靜態文件

簡單記錄一下webpack學習過程當中須要注意的點

先背一遍基本概念：

• entry:webpack構造的起點，能夠是單個也能夠是多個入口，甚至動態配置
  
• output：接受一個對象，控制webpack如何向硬盤寫入編譯文件
  
• loader：定義非js文件的處理方式
  
• plugins：豐富webpack的功能
  

webpack處理css文件

webpack最基本的css處理：css-loader + style-loader。其中css-loader用於處理css文件中的@import和url(...)，而style-loader用於將css-loader的輸出生成js中的函數調用將css動態添加到html文件中

目錄結構以下

在main.js中引入css

import base from './src/css/base.css'import common from './src/css/common.css'複製代碼

webpack.config.js中配置

{
	test:/\.css$/,
	use: ExtractTextWebpackPlugin.extract({
		fallback: {//編譯後應該使用什麼插件來處理css文件
		  loader: 'style-loader'
		},
		use:[
		  {//用什麼插件來編譯css文件
			loader: 'css-loader'
		  },
		  {
			loader: 'postcss-loader',
			options: {
			  plugins:[
				require('autoprefixer')({
					browsers:['last 5 versions']
				})
			  ] 
			}
		  }
		]
	  }),
	  exclude:/node_modules/
},

 plugins:[        new ExtractTextWebpackPlugin({            filename:'css/[name].min.css'        }),
]
複製代碼

具體配置咱們不談，咱們講講注意點，

首先咱們的loader的加載順序是不能隨意改動的，webpack加載loader是從下到上，也就是先從post-loader->css-loader-->style-loader, 

除了css-loader + style-loader還用到了extract-text-webpack-plugin和postcss-loader，首先extract-text-webpack-plugin的做用是將css文件單獨打包出來，若是沒有這個插件，咱們的css將會和js文件打包到一塊兒，postcss-loader這裏咱們咱們結合Autoprefixer來使用，做用是能夠爲css屬性添加瀏覽器前綴。

webpack處理圖片

這裏用到的loader有url-loader和file-loader

{
	test:/\.(png|jpg|jpeg|gif)$/,
	use:[
		{
		loader:'url-loader',
		options:{
			limit:'15000',
			name:'img/[hash:8].[ext]',
			publicPath:'../'
		}
		}
	]
}
複製代碼

這裏須要注意的點我注意到的有一點，若是咱們將項目中的圖片單獨放在一個文件夾下，publicPath也須要單獨配置，不然圖片的地址將會錯誤，咱們的 output 中也有一個相同的參數publicPath，當咱們單獨配置了url-loader下的publicPath時，output中的publicPath將會被覆蓋，在實際項目中咱們能夠配置對應的圖片域名，以下：

當咱們須要將vue-cli生成的項目部署到服務器時，須要將assetsPublicPath路徑修改成./也是同樣的道理。

使用html-webpack-plugin生成靜態文件

new HtmlWebpackPlugin({
	title: "處理靜態資源",
	hash:true,
	template: './index.html',
}),
複製代碼

這裏我糾結過js文件和css文件引入的問題，生成的html文件是按照什麼路徑規則引入依賴的，經過幾回實驗，我得出來的結果是這樣的：引入的路徑是由output中的publicPath和filename共同決定的（有點智障的我。。）。

遇到的問題總結起來很簡單，可是本身真正去寫一套配置的時候老是會遇到各類問題，而後感受到無從解決，只有本身寫過一遍才能說本身懂一點webpack，哈哈哈（代碼地址）