webpack初级配置 ---- css文件 抽离 ----css自动添加css兼容前缀

webpack 初级配置 css文件抽离

1.拷贝上一篇webpack配置

	const path = require('path');
	-------
		新增
		npm install mini-css-extract-plugin -D
		npm install postcss-loader autoprefixer -D
		const MiniCssEctractPlugin = require('mini-css-extract-plugin');
	-------
	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  对象
		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'，
						//--------新增
						MiniCssEctractPlugin.loader,
						//---------
						'css-loader'，
						//------新增
						'postcss-loader' 
						//--------
				}，
				{
					test:/\.less$/,
					use:[
						//'style-loader'，
						//---------新增
						MiniCssEctractPlugin.loader,
						//----------
						'css-loader',
						//------新增
						'postcss-loader' 
						//--------
						'less-loader'
				}
			]			
		}
		，
		 plugins: [
			   //这里放让插件
			   new HtmlWebpackPlugin({
				      filename: 'index.html',
				      template: 'src/workbench.html',对应模板
				      chunks: ['index'],只匹配index.js 
				    }),
//------新增
				   new MiniCssEctractPlugin ({
						filename:'min.css'
					})
			  ],
	}

1.2 在跟目录文件下增加postcss.config.js

module.exports={
	plugins:[
		require('autoprefixer')
	]
}

第二种写法:

	-------
		新增
		npm install mini-css-extract-plugin -D
		npm install postcss-loader autoprefixer -D
		npm install ExtractTextPlugin -D
		const ExtractTextPlugin = require('extract-text-webpack-plugin');
		const MiniCssEctractPlugin = require('mini-css-extract-plugin');
		const autoprefixer = require('autoprefixer');
		const postcssOpts = {
			  ident: 'postcss', // https://webpack.js.org/guides/migrating/#complex-options
			  plugins: () => [
			    autoprefixer({
			      browsers: ['last 2 versions', 'Firefox ESR', '> 1%', 'ie >= 8', 'iOS >= 8', 'Android >= 4'],
			    }),
			  ],
			};
	-------
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  对象
		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$/i, use: ExtractTextPlugin.extract({
				          fallback: 'style-loader',
				          use: [
				            'css-loader', { loader: 'postcss-loader', options: postcssOpts }
				          ]
				        })
				      },
					{
					        test: /\.less$/i, use: ExtractTextPlugin.extract({
					          fallback: 'style-loader',
					          use: [
					            'css-loader', { loader: 'postcss-loader', options: postcssOpts }, 'less-loader'
					          ]
					        })
					 },
			]			
		}
		，
		 plugins: [
			   //这里放让插件
			   new HtmlWebpackPlugin({
				      filename: 'index.html',
				      template: 'src/workbench.html',对应模板
				      chunks: ['index'],只匹配index.js 
				    }),
//------新增
				   new MiniCssEctractPlugin ({
						filename:'min.css'
					})
			  ],
	}