网站建设自,自己做网站导航,工程公司有哪些,郑州地区网站建设公司webpack学习-2.管理资源 1.这章要干嘛2.加载css注意顺序#xff01; 3.总结 1.这章要干嘛
管理资源#xff0c;什么意思呢#xff1f;管理什么资源#xff1f;项目中经常会 导入各种各样的css文件#xff0c;图片文件#xff0c;字体文件#xff0c;数据文件等等#… webpack学习-2.管理资源 1.这章要干嘛2.加载css注意顺序 3.总结 1.这章要干嘛
管理资源什么意思呢管理什么资源项目中经常会 导入各种各样的css文件图片文件字体文件数据文件等等不经过处理的话浏览器是不一定能识别的。所以这章就来试试效果主要是。
2.加载css
要想在 JavaScript 模块中导入 CSS 文件需要安装 style-loader 和 css-loader并在 module 配置 中添加这些 loader npm install --save-dev style-loader css-loader webpack.config.js const path require(path);module.exports {entry: ./src/index.js,output: {filename: bundle.js,path: path.resolve(__dirname, dist),},module: {rules: [{test: /\.css$/i,use: [style-loader, css-loader],},],},};注意顺序
module loader 可以链式调用。链中的每个 loader 都将对资源进行转换不过链会逆序执行。第一个 loader 将其结果被转换后的资源传递给下一个 loader依此类推。最后webpack 期望链中的最后的 loader 返回 JavaScript。
请确保 loader 的先后顺序‘style-loader’ 在前而 ‘css-loader’ 在后。如果不遵守此约定webpack 可能会抛出错误。 其他按官网步骤来没问题
3.总结
按官网例子完成截图 用官网的来总结吧这次 上述所有内容中最出色之处在于以这种方式加载资源可以以更直观的方式将模块和资源组合在一起。无需依赖于含有全部资源的 /assets 目录而是将资源与代码组合在一起使用。 就是如果要在js模块中引入各种资源文件就要在webpack配置文件中配置对应的loader和npm对应的包。
