webpack打包CSS详细流程解析-前端问答-PHP中文网

webpack打包CSS详细流程解析

WBOY

发布： 2022-08-09 10:30:22

转载

2255人浏览过

本篇文章给大家带来了关于javascript的相关知识，其中主要介绍了关于webpack打包css流程的相关问题，下面一起来看一下，希望对大家有帮助。

webpack打包CSS详细流程解析

【相关推荐：javascript视频教程、web前端】

1，要打包的文件，和引入的模板文件准备

先准备好需要转换的文件，放在src文件夹中，有index.css样式文件和index.js。虽然说是把css也编译打包，也是先将其转换给index.js文件的,index中的文件内容import './index.css'

还有一个模板文件，也就是将打包编译好的文件引入到的index.html文件

立即学习“前端免费学习笔记（深入）”；

import './index.css'

登录后复制

2，环境搭建

npm init =》项目搭建环境的初始化

初始化就会自动生成webpack.json和node_modules包安装的文件。

再在环境中安装包

1）基本的webpack包的安装

npm install --save-dev webpack-cli@3.3.12 webpack@4.44.1

登录后复制

2）将模块化编译打包的文件自动引入模板文件，也就是html文件

npm install --save-dev html-webpack-plugin@4.3.0

登录后复制

3）桥梁文件loder-css和webpack的桥梁

识别css文件的安装包

豆包AI编程

豆包推出的AI编程助手

483

查看详情

npm install --save-dev css-loader@4.1.1

登录后复制

CSS样式以style的方式引入的

npm install --save-dev style-loader@1.2.1

登录后复制

CSS样式以link的方式引入

npm install --save-dev mini-css-extract-plugin@0.9.0

登录后复制

最后安装的包，可以从package.json中查看

{
  "name": "webpack-css",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "webpack": "webpack"
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "css-loader": "^4.1.1",
    "html-webpack-plugin": "^4.3.0",
    "mini-css-extract-plugin": "^0.9.0",
    "style-loader": "^1.2.1",
    "webpack": "^4.44.1",
    "webpack-cli": "^3.3.12"
  }
}

登录后复制

3，对环境进行配置

plugins

HtmlWebpackPlugin

js文件引入到html文件中需要手动，但是使用该插件，可以自动引入到html文件中

需要实例化，在plugins中进行配置

 const HtmlWebpackPlugin = require('html-webpack-plugin');
 plugins: [
    // 自动将依赖注入 html 模板，并输出最终的 html 文件到目标文件夹
    new HtmlWebpackPlugin({
      //在dist文件下成为打包生成的文件
      filename: 'index.html',
      //源文件，一起作为模板
      template: './src/index.art',
      //要引入的文件，在entry里面的js文件的名称
      chunks: ['index']
    }),
    new HtmlWebpackPlugin({
      filename: 'list.html',
      template: './src/list.art',
      chunks: ['list']
    })
  ]

登录后复制

环境进行配置 webpack.config.js

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
//css用link的方式引入
const MiniCssExtractPlugin = require('mini-css-extract-plugin');

module.exports = {
  mode: 'development',
  entry: './src/index.js',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: '[name].js'
  },
  module: {
    rules: [
      {
        test: /\.css$/,
        // loader: 'css-loader'
        // use: ['style-loader', 'css-loader']
        use: [MiniCssExtractPlugin.loader, 'css-loader']
      }
    ]
  },
  plugins: [ 
    new HtmlWebpackPlugin({
      template: './index.html',
      filename: 'index.html'
    }),
    new MiniCssExtractPlugin({
      filename: 'css/[name].css'
    })
  ]
};

登录后复制