4 ---＞ webpack打包样式资源

最新推荐文章于 2024-11-07 17:20:39 发布

ZhaoYulin6

最新推荐文章于 2024-11-07 17:20:39 发布

阅读量154

点赞数

文章标签： webpack

本文链接：https://blog.csdn.net/ZhaoYulin6/article/details/118145573

版权

处理css文件

1.新建index.css和index.js文件
index.css文件

html,
body {
  margin: 0;
  padding: 0;
  background-color: pink;
  height: 100%;
}

index.js文件引入css文件

import './index.css';

2.新建配置文件webpack.config.js

编写最基本的配置

/*
 * @Author: zyl
 * @Date: 2021-06-22 14:40:29
 * @LastEditors: zyl
 * @LastEditTime: 2021-06-22 14:40:29
 * webpack.config.js  webpack配置文件
 * 指示webpack的执行，当运行指令时，会加载里面的配置
 * 所有的构建工具都是基于nodejs平台运行的  模块化默认采用commonjs
 */

//resolve用来拼接绝对路径的方法
const {resolve} = require('path')
module.exports = {
  //webpack配置
  //入口起点
  entry: './src/index.js',
  output: {
    //文件输出名
    filename: 'built.js',
    //文件输出路径
    //__dirname代表当前文件的目录绝对路径
    path:resolve(__dirname,'build')
  },
  module: {
    rules:[
        //详细的loader配置
    ]
  },
  plugins: [
    //详细的plugins配置
  ],
  //模式
  mode:'development', //开发模式
  // mode:'production',  //生产模式
}

3.处理css
编写对应的模块设置

module: {
    rules: [
      {
        //详细的loader配置
        //匹配那些文件 ,这里是.css文件
        test: /\.css$/,
        //使用那些loader进行处理
        use: [
          //use数组中的loader执行顺序是 ：从右到左，从下到上，依次执行
          //创建style标签，将js中的样式资源插入进去，添加到head中生效
          'style-loader',
          //将css文件变成commonjs模块加载js中，里面内容是样式字符串
          'css-loader'
        ]
      }
    ]
  },

4.安装对应的依赖
这里进入最外层进行安装依赖，这样之后的文件也方便使用

F:\study\webpack>cnpm init
package name: (webpack) webpack_code
F:\study\webpack>npm i webpack webpack-cli -D
F:\study\webpack>npm i css-loader style-loader -D

5.打包

F:\study\webpack\03打包样式资源>webpack

6.效果图
在这里插入图片描述

7.查看打包出来的文件built.js文件
可以找到我们的css文件
在这里插入图片描述

并且在eval函数中能够看到我们写的样式
在这里插入图片描述

8.查看效果
8.1在build文件夹下面新建index.html
引入打包后的文件

<body>
  <script src='./built.js'></script>
  
</body>

运行查看效果
在这里插入图片描述

处理less文件

编写loader配置

{
        test: /\.less$/,
        use: [
          'style-loader',
          'css-loader',
          //将less文件编译成css文件
          'less-loader'
        ]
      }

下载less-loader

F:\study\webpack>npm i -s style-loader css-loader less-loader less

同样可以实现

每一种文件要通过不同的loader
同理替换sass等等

ZhaoYulin6

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫