webpack基本配置--样式资源打包

针对上篇文章有基本的了解之后，那么对于怎么配置，话不多说~~

• 开始安装基于webpack开发项目

• npm init (初始化项目)

• npm i webpack webpack-cli -g (全局安装webpack和webpack-cli)

• npm i webpack webpack-cli -D

• 在安装的过程中需要输入项目名称，输入你的项目名称之后，一直回车到结束即可

• 文件目录
  注意这里的文件目录是打包好的，而开始安装好，创建目录时是没有built.js文件，built.js文件是打包好之后才生成的

• 安装完成之后，在根目录创建打包文件build，之后再创建一个html，方便待会测试
  html测试
  

• 并且在根目录下创建src文件，在src创建入口文件Index.js，index.css,index.less

• 将index.css index.less引入到入口文件

• index.css 和index.less样式
• 
  
• 之后在根目录中创建webpack.config.js创建配置文件

把准备工作准备好之后，就可以开始配置了

webpack样式打包资源

const { resolve} = require('path')
	module.exports = {
		<!-- 入口起点 -->
		entry: './src/index.js',
		<!-- 输出文件 -->
		output:{
			<!-- 输出文件名称 -->
			filename:'built.js'
			<!-- 输出文件路径 -->
			<!-- __dirname  nodejs的变量,代表当前文件的目录绝对路径 -->
			<!-- 通过resolve引入-->
			path:resolve(__dirname,'build')
		},
		module:{
			rules:[
				{
					test:/.\css$/,
					<!-- 注意配置css时，应该先下载再通过use使用 -->
					<!-- 下载 npm i style-loader css-loader -D -->
					use:[
						//use数组中loader执行顺序:从右到左，从下到上，依次执行
						//创建style标签，将js中的样式资源插入进行，添加到head中生效
						'style-loader'
						//将css文件变成commonjs模块加载js中，里面内容是样式字符串
						'css-loader'
					]
				},
				<!-- 如果使用less ,sass预编译  则不能继续修改上面已经配置好的代码需要重新配置-->
				{
					test:/.\less$/,
					use:[
						'style-loader',
						'css-loader',
						// 需要安装less和less-loader
						<!-- npm i less-loader -D -->
						// 将less编译成css文件
						'less-loader'
					]le
				}
				
			]
		},
		plugins:[
			<!-- 配置plugins -->
		],
		<!-- mode 模式-->
		mode: 'development' //开发模式
		或者
		<!-- mode: 'production' //生产模式 (需要注意的是，mode只能用其中一种模式。不能同时使用) -->
		
	}

配置完之后，在终端打开输入webpack，进行打包。打包结束之后会发现build文件会生成刚刚配置好的built.js文件。而html文件也会自动生成引入built.js文件，如图

然后可以通过html文件上打开浏览器进行查看刚刚写好的css样式。

• 打包后的样式资源，可以再built.js文件下查看，一般再代码块的最后几行
• 如图
•