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，哈哈哈（代码地址）