frame中src怎么设置成一个变量_webpack中Css的处理

最新推荐文章于 2022-05-11 01:16:04 发布

weixin_39968266

最新推荐文章于 2022-05-11 01:16:04 发布

阅读量60

点赞数

文章标签： frame中src怎么设置成一个变量

摘要：这个时代对速度和性能要求越来越高，前端开发中兼容性问题是一个让人头疼的问题，也许在这台设备上明明好好的，但是换一个设备就会让人哭笑不得，对于用户体验和流量资源的开销也是要考虑的一个问题，当下我们正在学习的webpack在这方面有着怎样的措施呢？这里我们将从对Css的处理说起。

大纲：

从js中提取css成单独的文件
Css的兼容性问题处理
Css文件的压缩

一、CSS文件的提取

安装插件npm install --save-dev mini-css-extract-plugin
webpack.config.js配置

const { resolve } = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');

module.exports = {
  entry: './src/js/index.js',
  output: {
    filename: 'js/built.js',
    path: resolve(__dirname, 'build')
  },
  module: {
    rules: [
      {
        test: /.css$/,
        use: [
          // 创建style标签，将样式放入
          // 'style-loader', 
          // 这个loader取代style-loader。作用：提取js中的css成单独文件
          MiniCssExtractPlugin.loader,
          // 将css文件整合到js文件中
          'css-loader'
        ]
      }
    ]
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: './src/index.html'
    }),
    new MiniCssExtractPlugin({
      // 对输出的css文件进行重命名
      filename: 'css/built.css'
    })
  ],
  mode: 'development'
};

3. html文件

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>webpack</title>
</head>
<body>
<div id="box1"></div>
<div id="box2"></div>
</body>
</html>

4. css文件

//a.css
#box1 {
    width: 100px;
    height: 100px;
    background-color: pink;
}

//b.css
#box2 {
    width: 100px;
    height: 100px;
    background-color: pink;
}

5. 入口文件index.js

import '../css/a.css';
import '../css/b.css';

6. 测试结果

二、兼容性处理

安装npm install --save-dev postcss-loader postcss-preset-env
配置文件

const { resolve } = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');

// 设置nodejs环境变量
// process.env.NODE_ENV = 'development';

module.exports = {
  entry: './src/js/index.js',
  output: {
    filename: 'js/built.js',
    path: resolve(__dirname, 'build')
  },
  module: {
    rules: [
      {
        test: /.css$/,
        use: [
          MiniCssExtractPlugin.loader,
          'css-loader',
          /*
            css兼容性处理：postcss --> postcss-loader postcss-preset-env

            帮postcss找到package.json中browserslist里面的配置，通过配置加载指定的css兼容性样式

            "browserslist": {
              // 开发环境 --> 设置node环境变量：process.env.NODE_ENV = development
              "development": [
                "last 1 chrome version",
                "last 1 firefox version",
                "last 1 safari version"
              ],
              // 生产环境：默认是看生产环境
              "production": [
                ">0.2%",
                "not dead",
                "not op_mini all"
              ]
            }
          */
          // 使用loader的默认配置
          // 'postcss-loader',
          // 修改loader的配置
          {
            loader: 'postcss-loader',
            options: {
              ident: 'postcss',
              plugins: () => [
                // postcss的插件
                require('postcss-preset-env')()
              ]
            }
          }
        ]
      }
    ]
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: './src/index.html'
    }),
    new MiniCssExtractPlugin({
      filename: 'css/built.css'
    })
  ],
  mode: 'development'
};

3. package.json中添加browserslist的配置

官方参考地址：https://github.com/browserslist/browserslist

 "browserslist": {
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ],
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ]
  }

4. 测试：

三、压缩

安装npm install --save-dev optimize-css-assets-webpack-plugin
配置文件

const { resolve } = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const OptimizeCssAssetsWebpackPlugin = require('optimize-css-assets-webpack-plugin')

// 设置nodejs环境变量
// process.env.NODE_ENV = 'development';

module.exports = {
  entry: './src/js/index.js',
  output: {
    filename: 'js/built.js',
    path: resolve(__dirname, 'build')
  },
  module: {
    rules: [
      {
        test: /.css$/,
        use: [
          MiniCssExtractPlugin.loader,
          'css-loader',
          {
            loader: 'postcss-loader',
            options: {
              ident: 'postcss',
              plugins: () => [
                // postcss的插件
                require('postcss-preset-env')()
              ]
            }
          }
        ]
      }
    ]
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: './src/index.html'
    }),
    new MiniCssExtractPlugin({
      filename: 'css/built.css'
    }),
    // 压缩css
    new OptimizeCssAssetsWebpackPlugin()
  ],
  mode: 'development'
};

3. 其他的文件和上面一样

4. 测试：

weixin_39968266

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
frame中src怎么设置成一个变量_webpack中Css的处理

摘要：这个时代对速度和性能要求越来越高，前端开发中兼容性问题是一个让人头疼的问题，也许在这台设备上明明好好的，但是换一个设备就会让人哭笑不得，对于用户体验和流量资源的开销也是要考虑的一个问题，当下我们正在学习的webpack在这方面有着怎样的措施呢？这里我们将从对Css的处理说起。大纲：从js中提取css成单独的文件 Css的兼容性问题处理 Css文件的压缩一、CSS文件的提取安装插件npm ...
复制链接

扫一扫