标签：文件 js webpack loader css 加载
webpack加载css文件及其配置
- 当我们写了几个css文件之后如果想要引用到html中去的话我们最开始的方式就是通过link标签将css文件导入进去，但是如果我们的css文件有很多的话，一个个的导入是不推荐的；而现在我们学了webpack，我们希望的是通过打包bundle.js文件，将所有的依赖文件全部导入进去。
- 我们要知道的是，如果在入口函数main.js文件中如果没有导入css文件，那么打包的bundle.js文件必然不会有css文件，所有我们需要让main.js文件依赖css文件。
- 使用代码：
require('css文件地址') - 依赖完之后，我们再打包一下 npm run build 会发现报错了。错误为：You may need an appropriate loader to handle this file type。意思是说你可能需要一个合适的loader来处理这个文件
- 于是我们打开webpack的中文网址，在里面找到了我们需要安装 css-loader 和 style-loader 这两个loader。并且我们还需要在webpack.config.js文件中配置一下这些loader
- 于是我们使用npm下载这两个依赖，代码如下：
npm install css-loader style-loader --save-dev - 在webpack.config.js文件中，有一个module的属性，该属性为一个对象，在该对象中有个rules属性，是一个数组，数组中的每一项都是处理不同文件loader所需要的对象。代码如下：
const path = require('path');
module.exports = {
// 在配置文件中，手动指定 入口 文件和 出口 文件
mode:'development', // webpack4.x版本中需要加入这个属性
entry:'./src/main.js', // 入口文件
output:{ // 出口文件
path:path.resolve(__dirname,'dist'), // 指定将要打包好的文件应该要输出到哪个地方去（注意：路径必须是绝对地址）
filename: 'bundle.js' // 指定输出文件的文件名
},
module:{
rules:[
{test:/\.css$/ , use:['style-loader' , 'css-loader']}
]
}
}- 其中test表示我们要处理的是哪种类型的文件，use中的每一项则是处理该类文件需要的loader。
注意：css-loader这个loader的作用是用来让main.js文件加载该css文件，而style-loader的作用是将模块的导出作为样式添加到 DOM 中。这里可能有人会有疑问：按这样的作用来讲的话应该先加载文件再作为样式添加到DOM中去才对，那数组中的顺序应该不是这样的。我在这里很明确的告诉你，你的想法是没有错的，只是webpack他这一点非常的奇特，它是从数组的最后一个元素，从右到左的顺序加载loader的。 - 设置依赖，下载好loader并配置完之后，我们再运行之后便发现css文件中的样式就出来了。
标签：文件,js,webpack,loader,css,加载 来源： https://www.cnblogs.com/liuyilong/p/11910922.html
本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享； 2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关； 3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关； 4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除； 5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。