웹팩에 CSS 스타일을 별도로 패키징-JS 튜토리얼-php.cn

웹팩에 CSS 스타일을 별도로 패키징

php中世界最好的语言

풀어 주다： 2018-06-13 11:46:32

원래의

2409명이 탐색했습니다.

이번에는 CSS 스타일을 webpack에 따로 패키징하는 방법을 알려드리겠습니다. webpack에 CSS 스타일을 따로 패키징할 때 주의사항은 무엇인가요?

제로, 소개

다음은 개인 프로젝트에서 정리한 기본 지식들입니다. 여기에 기록해두면 누구나 웹팩을 더 빠르고 편리하게 이해하고 사용할 수 있습니다. 제한된 기능으로 인해 오류나 문제가 있는 경우 지적해 주시기 바랍니다.

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 파일로 패키징하면 됩니다. 여러 CSS 항목을 설정하고 웹팩에서 로더를 사용하도록 할 수 있습니다. 포장하다. 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의 간단한 구성은 다음과 같습니다.