이번에는 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의 간단한 구성은 다음과 같습니다.
추천 자료:
Vue+php는위 내용은 웹팩에 CSS 스타일을 별도로 패키징의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!