qq_33712668
qq_33712668

【webpack】2. loader---动态加载css样式,文件，数据

webpack学习

【webpack】1.快速入门
【webpack】2.webpack核心–loader
【webpack】3. 将入口html也打包
【webpack】4. webpack-dev-server思考
【webpack】5.开发和生产模式的配置加载

文章目录

    • webpack学习
    • webpack loader
      • 1. 准备工作：创建项目
      • 2. 使用css相关loader
        • 标明css来源
      • 3. 文件loader
      • 4. 动态加载数据
      • 5. 练习 导入sass

webpack loader

webpack本身就能理解js，所以可以随意import不需要loader，但是如果import的是其他文件比如css，则不能理解，需要告诉它css怎么加载，这就是loader的职责。css用css-loader和style-loader。loader是webpack的核心

1. 准备工作：创建项目

为了方便也为了重新复习下webpack配置，重新新建个文件夹, 在mac terminal中输入

mkdir loader .  //新建
cd loader
npm init -y
npm install webpack webpack-cli --save

【webpack】2. loader---动态加载css样式,文件，数据_第1张图片

  1. 新建一个新的index.html
  2. 修改package.json里的script配置
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "pack": "node_modules/.bin/webpack --watch"
  },
  1. 新建一个js文件夹放js文件
  2. 新建webpack.config.js如下
module.exports={
    entry:'./js/index.js',//入口文件
    output:{//出口
        filename:'pack.js',//文件名
        path:__dirname + '/dist'
    }
}

现在目录如下
【webpack】2. loader---动态加载css样式,文件，数据_第2张图片
之前每次修改js里的文件都要重新打包，这里可以对package.json进行修改，实现监听变动并自动打包，package.json修改如下,后面加个–watch即可，只要项目里的文件发生变化就重新打包

  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "pack": "node_modules/.bin/webpack --watch"
  },

npm run pack打包
打包完成后的pack.js在./dist目录下，记得要在index.html中引入打包后的pack.js文件, 在浏览器中打开index.html即可

    <body>
        <script src="./dist/pack.js">script>
    body>

在js文件夹下创建base.js，新建一个css文件夹放base.css，index.js里想要import base.js和base.css.base.js没问题，base.css就不行，因为webpack本身就能理解js，所以可以随意import不需要loader，但是如果import的是其他文件比如css，则不能理解，需要告诉它css怎么加载，这就是loader的职责。css用css-loader和style-loader

2. 使用css相关loader

先npm引入这两个loader包

npm install css-loader style-loader --save

再修改配置文件webpack.config.js，备注中有解释

module.exports={
	mode: 'development',//开发模式
    entry:'./js/index.js',//入口文件
    output:{//出口
        filename:'pack.js',//文件名
        path:__dirname + '/dist'//当前目录下
    },
    module: {
        rules: [
            {
                test: /\.css$/i,//正则  意思是只要以css结尾的文件就遵循这个规则，i表示不区分大小写
                use:['style-loader', 'css-loader']//css-loader是用来专门解析css语法，最主要作用就是把文件内容变成字符串传递下去，style-loader把css-loader解析好的字符串插入到html的style标签里。顺序很重要从右往左
            }
        ]
    }
}

这时候index.js里就可以引入css文件了

import '../css/base.css'
console.log('8')
  • 如果引入两个css文件，一个设置背景色为红色，一个为黑色，那么第二个import的优先级更高，覆盖第一个。这就和写再html的style标签里一样
  • loader就是在模块导入资源的时候会分析一下是不是js,如果不是js怎么能转化成js理解的方式最后穿插到html里面，有一二百个loader

css-loader是用来专门解析css语法，最主要作用就是把文件内容变成字符串传递下去
style-loader把css-loader解析好的字符串插入到html的style标签里

标明css来源

但这样也会出现问题，比如在base.js里设置body的背景色，在more.css里设置border样式，在index.js里引入这两个样式，打包运行打开index.html会发现，右下角仅仅能看到style, 看不出是哪个文件设置里背景色，哪个设置了border
【webpack】2. loader---动态加载css样式,文件，数据_第3张图片
解决办法就是修改配置文件webpack.config.js里的module的rules，[]里写成对象形式

        rules: [
            {
                test: /\.css$/,//正则表达式，只要以css结尾的文件遵循这个规则
                use:[
                    {
                        loader:'style-loader'
                    }, 
                    {
                        loader: 'css-loader',
                        options: {
                            sourceMap: true,
                        }
                    }
                ]//style-loader就是把这个文件放到html的