webpack 基础配置----样式处理

webpack 基础配置----样式处理

1.拷贝上一篇webpack配置

	const path = require('path');
	-------
		新增
		npm install css-loader style-loader -D//css处理文件
	-------
	module.exports = {
		devServer:{
			 port:8000,//启动服务监听端口
			  host:'0.0.0.0'，//可以通过localhost访问
			  contentBase:'./build'  //服务绝对路径
			  overlay:{//在页面上显示错误信息
			   	errors：true，
			   },
			   open:true，//启动webpack-dev-server时自动打开浏览器
			   hot:true //启用热更
		} ,
		mode:'development',//模式 默认两种 production和develoment
		enty:'./src/index.js'//可以为字符串可以是对象可以是数组
		//这里应用程序开始执行的地方，webpack 开始打包
		output:{
		//webpack 输出结果的位置
		//path需要引入node的path模块
		path:path.resolve(__dirname,'build')
		filename:'build.js'//打包出来的文件名，若需要每次打包处不同文件名，可加哈希值
		//filename:'build.[hash].js'
		},
		
		//以下为新增----------
		module:{//模块
			rule:[
			//规则，
			//css-loader 处理css文件与css文件之间想用引用 例如：在a.css文件中引入b.css @import './b.css'
			//style-loader 处理css文件插入到html文件中的link标签中
			//loader 运行规则 从下而上，从右到左单独把css打包出来，而是直接打包在link标签内 <style>
</style>
			//此模块不能
				{
					test:/\.css$/,
					use:[
						'style-loader'，
						'css-loader'
						]
					//use :[
					//{
					//loader:	'style-loader',
					//options:{
					//配置项
					insertAt:'top'//插入最前面
					//	}
					//}
					//,
					//	'css-loader'
					//]
				}，
				{
					test:/\.less$/,
					use:[
						'style-loader'，
						'css-loader',
						'less-loader'
						]
					//use :[
					//{
					//loader:	'style-loader',
					//options:{
					//配置项
					insertAt:'top'//插入最前面
					//	}
					//}
					//,
					//	'css-loader',
					//  'less-loader'
					//]
				}
			]			
		}
		---------------
		，
		 plugins: [
			   //这里放让插件
			   new HtmlWebpackPlugin({
				      filename: 'index.html',
				      template: 'src/workbench.html',对应模板
				      chunks: ['index'],只匹配index.js 
				    }),
			  ],
	}