每日JavaScript之webpack4.0处理css

最新推荐文章于 2023-06-14 12:08:12 发布

tcap99

最新推荐文章于 2023-06-14 12:08:12 发布

阅读量198

点赞数

分类专栏： css Javascript

本文链接：https://blog.csdn.net/tcap99/article/details/84039167

版权

Javascript 同时被 2 个专栏收录

44 篇文章 0 订阅

订阅专栏

css

7 篇文章 0 订阅

订阅专栏

消失多日，因为身体不好，曾经的学习之情也消失了不少，不过我会坚持的。今天来总结一下，webpack处理css。
https://godbmw.com/passage/36 这是本文参考学习的文章，非常实用。
首先，选个你喜欢的目录，打开CMD。

npm init

一路回车，然后cd进你创建的project name，我的叫做wepack-demo
然后将package.json改为

{
  "name": "webpack-demo",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "bulid": "webpack --mode development",
    // 这是打开webpack的开发服务器，没必要设置
    "dev": "webpack-dev-server --open --mode development" 
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "css-loader": "^1.0.1", // 处理通过style标签中的css代码
    "style-loader": "^0.23.1", // 读取css文件
    "file-loader": "^1.1.11", // 处理通过link标签引入css
    "webpack": "^4.25.1",
    "webpack-cli": "^3.1.2", // 要4.0分开安装
    "webpack-dev-server": "^3.1.10" // webpack开发服务器
  }
}
然后

npm install

再创建一个src文件夹里面创建一个main.css和index.html

*,
body {
  margin: 0;
  padding: 0;
}
html {
  background: skyblue;
}

let clicked = false;
window.addEventListener("click", function() {
  // 点击页面引入样式
  if (!clicked) {
    import("./main.css");
  }
});

再再根目录创建一个index.html和webpack.config.js
index.html主要是为了引用在webpack处理过的js

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
</head>
<body>
  <script src="./dist/app.bundle.js"></script>
</body>
</html>

webpack.config.js是webpack默认设置文件，这是处理link标签引入css文件的设置

const path = require("path");

module.exports = {
  entry: {
    app: "./src/app.js"
  },
  output: {
    publicPath: __dirname + "/dist/",
    path: path.resolve(__dirname, "dist"),
    filename: "[name].bundle.js"
  },
  module: {
    rules: [
      {
        test: /\.css$/, // 针对CSS结尾的文件设置LOADER
        use: [
          {
            loader: "style-loader",
            options: {
              singleton: true // 处理为单个style标签
            }
          },
          {
            loader: "file-loader"
          }
        ]
      }
    ]
  },
  devServer: {
    contentBase: path.join(__dirname, "dist"), //静态文件根目录
    port: 9090, // 端口
    host: 'localhost',
    overlay: true,
    compress: true // 服务器返回浏览器的时候是否启动gzip压缩
  }
};

此时在命令行

npm run bulid

再打开index.html，打开开发者工具，
就可以看到css文件通过link标签引入。

style引入css文件
将webpack.config.js改为

const path = require("path");

module.exports = {
  entry: {
    app: "./src/app.js"
  },
  output: {
    publicPath: __dirname + "/dist/",
    path: path.resolve(__dirname, "dist"),
    filename: "[name].bundle.js"
  },
  module: {
    rules: [
      {
        test: /\.css$/, // 针对CSS结尾的文件设置LOADER
        use: [
          {
            loader: "style-loader/useable",
            options: {
              singleton: true // 处理为单个style标签
            }
          },
          {
            loader: "css-loader",
            options: {
              minimize: true  // css代码压缩
            }
          }
        ]
      }
    ]
  },
  devServer: {
    contentBase: path.join(__dirname, "dist"), //静态文件根目录
    port: 9090, // 端口
    host: 'localhost',
    overlay: true,
    compress: true // 服务器返回浏览器的时候是否启动gzip压缩
  }
};

将app.js改为

let flag = false
import main from "./main.css"
setInterval(function() {
  // unuse和use 是 cssObj上的方法
  if (flag) {
    main.unuse();
  } else {
    main.use();
  }
  flag = !flag;
}, 3000);

webpack4.0实在太多坑了，继续学习。

tcap99

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
每日JavaScript之webpack4.0处理css

消失多日，因为身体不好，曾经的学习之情也消失了不少，不过我会坚持的。今天来总结一下，webpack处理css。https://godbmw.com/passage/36 这是本文参考学习的文章，非常实用。首先，选个你喜欢的目录，打开CMD。npm init一路回车，然后cd进你创建的project name，我的叫做wepack-demo然后将package.json改为{ "...
复制链接

扫一扫

专栏目录