웹팩이 CSS를 분리하고 별도로 패키징하는 방법

이 글에서는 CSS를 분리해서 webpack으로 따로 패키징하는 방법을 주로 소개하고 있는데 내용이 꽤 좋아서 참고용으로 올려봅니다.

이 글에서는 CSS를 분리하여 별도로 패키징하는 webpack 방법을 소개합니다. 자세한 내용은 다음과 같습니다.

2018-02-08 14:46: 06방금 웹팩에서 찾아보니 패키지 CSS가 검색된 글 중에서 상대적으로 높은 편인데 글이 꽤 헷갈려서 내용을 좀 더 이해하기 쉽게 정리했습니다.

2018-02-01 14:45:23

본 글에서는 CSS를 하나의 CSS 파일로 패키징하는 방법만 설명하고 있기 때문에 여러 CSS 파일로 패키징하는 방법은 설명하지 않습니다. 여러 CSS 파일로 패키징하는 방법입니다.

2016-05-17 11:55

방금 webpack을 배웠고, webpack이 css를 따로 패키징하는 방법을 기록해두었습니다

Zero, 소개

다음은 개인 프로젝트에서 기본 지식을 정리한 내용입니다. 여기에 기록해 두었습니다. 감상을 깊게 해보세요. , 누구나 웹팩을 더욱 빠르고 편리하게 이해하고 사용할 수 있도록 돕습니다. 제한된 기능으로 인해 오류나 문제가 있는 경우 지적해 주시기 바랍니다. webpack은 모든 리소스를 모듈로 취급합니다. CSS, Image, JS 글꼴 파일은 모두 번들.js 파일로 패키징될 수 있습니다.

webpack의 기본 사용법은 매우 간단하지만, 모든 면을 모두 설명하기에는 내용이 많기 때문에 여기서는 webpack을 사용하여 CSS를 별도로 패키징하는 방법을 주로 설명합니다.

패키징은 gulp를 사용하여 해시 값을 추가하는 방법, html에서 참조 경로를 바꾸는 방법, CND에 업로드하는 방법을 구현할 수 있습니다. [관심있으면 나중에 글 써주세요]

1. extract-text-webpack-plugin 사용법

CSS를 별도로 패키징하려면 webpack에 있는 플러그인, extract-text-webpack을 사용해야 합니다. -plugin

1 . extract-text-webpack-plugin

// use npm 
npm install extract-text-webpack-plugin --save-dev

// or use yarn 
yarn add extract-text-webpack-plugin

2을 설치합니다. 로더에서 플러그인 구성(사용할 로더) 및 추출된 CSS 파일 이름을 webpack 플러그인에서 설정합니다. .

var Ex = require('extract-text-webpack-plugin');
// ...省略
module: {
 loaders: [{
  test: /\.less/,
  loader: Ex.extract('style-loader', 'css-loader','less-loader') // 单独打包出CSS，这里配置注意下
 }]
},
plugins: [
 new Ex("【name】.css")
]

좀 더 자세한 내용은 "extract-text-webpack-plugin 사용 및 설치"를 참조하세요

모두가 이해할 수 있는 두 가지 실용적인 예가 있습니다

두 번째, 단일 페이지 애플리케이션, JS 넣기 CSS는 별도로 패키징됩니다

파일을 패키징하려면 일반 항목인 js 파일에서 CSS 파일을 참조하기만 하면 되며, 여러 CSS 항목을 설정하여 webpack을 사용할 수 있습니다. 패키지할 로더. js 파일을 별도로 분할하여 패키징하는 것과 같습니다. 다음은 두 가지 예입니다.

// webpack 1.x 配置  【早期使用的配置，那时候是1.x】
/*  webpack.config.js  */
var precss = require('precss');
var cssnext = require('cssnext');
var autoprefixer = require('autoprefixer');
var cssnano = require('cssnano');
var Ex = require('extract-text-webpack-plugin');
module.exports = {
  entry: './index.js',
  output: {
   filename: 'index.js'
  },
  module: {
   loaders: [{
    test: /\.less/,
    loader: Ex.extract('style-loader', 'css-loader','less-loader') // 单独打包出CSS，这里配置注意下
   }]
  },
  plugins: [
   new Ex("【name】.css")
  ]
 }

3. webpack이 여러 CSS 파일을 패키징하는 방법

2. 해당 구성을 구성 파일에 추가하세요

완성된 다중 항목 CSS 패키징 구성이 아래에 직접 제공됩니다

// webpack 3.x 的配置
var path = require('path')
var glob = require('globby') 
var webpack = require('webpack')
var ExtractTextPlugin = require('extract-text-webpack-plugin')

// CSS入口配置
var CSS_PATH = {
 css: {
  pattern: ['./src/**/[^_]*.less', '!./src/old/**/*.less'],
  src: path.join(__dirname, 'src'),
  dst: path.resolve(__dirname, 'static/build/webpack'),
 }
}

// 遍历除所有需要打包的CSS文件路径
function getCSSEntries(config) {
 var fileList = glob.sync(config.pattern)
 return fileList.reduce(function (previous, current) {
  var filePath = path.parse(path.relative(config.src, current))
  var withoutSuffix = path.join(filePath.dir, filePath.name)
  previous[withoutSuffix] = path.resolve(__dirname, current)
  return previous
 }, {})
}

module.exports = [
 {
  devtool: 'cheap-module-eval-source-map',
  context: path.resolve(__dirname),
  entry: getCSSEntries(CSS_PATH.css),
  output: {
   path: CSS_PATH.css.dst,
   filename: '[name].css'
  },
  module: {
   rules: [
    {
     test: /\.less$/,
     use: ExtractTextPlugin.extract({
      use: ['css-loader', 'postcss-loader', 'less-loader']
     })
    }
   ]
  },
  resolve: {
   extensions: ['.less']
  },
  plugins: [
   new ExtractTextPlugin('[name].css'),
  ]
 },
// 如果还需要打包js，则可以在这里增加一个单独打包js的处理【根据自己需求来】
// {
//  entry:{},
//  output:{},
//  ... 省略
// }
]

일부 학생들은 여전히 ​​webpack1을 사용하고 있을 수 있습니다. .x 이므로 webpack1의 간단한 구성은 다음과 같습니다.

관련 권장사항:

CSS를 사용하여 녹색 체크박스 버튼 스타일 맞춤설정

DIV 및 CSS를 사용하여 Jingdong Mall 네비게이션 바 효과 모방

위 내용은 웹팩이 CSS를 분리하고 별도로 패키징하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!