Webpack学习——Loader（文件转换器）

仅记录个人学习观点

一、Webpack打包CSS文件

1. 安装css-loader

npm install css-loader --save-dev

2. 第一种方法（推荐）

• 在webpack.config.js文件里配置css-loader

• 在index.js里引入css文件
  

3. 第二种方法
   不在rule里面写，采用内联式
   

二、创建属于自己的文件类型：自定义loader开发

1. 在src下创建一个test.imooc的文件（这个后缀名可以自定义）
2. test.imooc里写上自己的代码

<script>
	export default {
		a:1,
		b:2
	}
</script>

3. 在index.js里引入这个文件
   

4. 在顶级文件夹下创建一个loader文件夹，在文件夹下创建一个imooc-loader.js文件，文件里写上以下代码
   
   

5. 在webpack.config.js文件里加上下面的配置
   

6. 运行build打包命令后，就能在bundle.js里看到自定义文件被打包了