Webpack 패키지 CSS 세부 프로세스 분석

이 글은 웹팩 CSS 패키징 프로세스와 관련된 이슈를 주로 소개하는 javascript에 대한 관련 지식을 함께 살펴보겠습니다.

[관련 권장사항: javascript 동영상 튜토리얼, 웹 프론트엔드]

1. 패키징할 파일과 도입할 템플릿 파일을 준비합니다

먼저 변환해야 할 파일을 준비합니다. src 폴더에 넣으면 index.css 스타일 파일과 index.js가 있습니다. CSS도 컴파일 및 패키징되지만 먼저 index.js 파일로 변환됩니다. 인덱스 가져오기 './index.css'에 있는 파일 내용

패키징 및 컴파일된 파일인 템플릿 파일도 있습니다. . 가져온 index.html 파일

import './index.css'

2, 환경 구축

npm init =》프로젝트 구축 환경 초기화

초기화하면 webpack.json 및 node_modules 패키지 설치 문서가 자동으로 생성됩니다. .

그런 다음 환경에 패키지를 설치합니다

1) 기본 웹팩 패키지 설치

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

2) 모듈러 컴파일 및 패키지된 파일을 html 파일인 템플릿 파일에 자동으로 삽입합니다. html 파일

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

3) 브릿지 파일 loder-css와 webpack 사이의 브릿지

CSS 파일의 설치 패키지를 식별합니다

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

CSS 스타일이 스타일 방식으로 도입되었습니다

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

CSS 스타일이 링크 방식으로 도입되었습니다

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

마지막으로 설치된 패키지는 json에서 View

{
  "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 파일에 자동으로 도입될 수 있습니다.

플러그인에서 인스턴스화 및 구성해야 합니다

 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'
    })
  ]
};

4, run

명령줄을 통해

npm run webpeck

[ 관련 추천: javascript 비디오 튜토리얼, 웹 프론트엔드 】

위 내용은 Webpack 패키지 CSS 세부 프로세스 분석의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!