webpack은 CSS와 다양한 로더를 가져옵니다.

이 글은 주로 webpack importing css와 다양한 로더에 대해 소개하고 있습니다. 이제는 모두와 공유하겠습니다. 도움이 필요한 친구들은 참고할 수 있습니다.

webpack import css

1) 해당 로더 npm 설치 스타일을 다운로드하세요. -loader css-loader -D

2) index.css를 main.js

import './css/index.css'

3) webpack.config.js 구성

모듈 속성 사용

const path = require('path')

module.exports = {
    mode: 'development',
    entry:path.join(__dirname,'./src/main.js'),//打包的那个文件    output:{
        path:path.join(__dirname,'./dist'),
        filename :'bundle.js'
    },
    devServer:{
        open:'true',
        port:'8081',
        contentBase:'src'
    },    module:{
        rules:[
            test: {'/\.css$/',use['style-loader','css-loader']}
        ]
    }}

다시 시작하고 `npm run dev`를 실행하세요

2. Webpack에서 이미지를 가져옵니다

이미지를 가져오려면 URL 주소를 사용해야 하므로 `url-loader` 및 `file-loader`를 도입해야 합니다( `file-loader`는 `url에 따라 다름). - loader` 그래서 함께 소개해야 합니다)

npm i url-loader file-loader -D

.box{
  background-image:url('../Images/1.jpg')  
}

webpack.config.js

module:{ 
    rules:[ 
        {test:/\.css$/,use:['style-loader','css-loader']},        {test:/\.(jpg|png|gif|bmp|jpeg)$/,use: url-loader?limit=4000&name=[hash:8]-[name].[ext]' },　　　　 //如果图片大于limit的大小则不会被解析成base64
        //name设置是否重命名图片,  [name].[ext]是保持引入的时候的图片的名字,[hash:8]-[name].[ext]是自动在图片原名前加一个随机的hash值，防止图片重复
        ]
}

3.

webpack용 브라우저에서 인식되지 않는 일부 고급 ES6 구문은 `babel`을 사용하여 변환할 수 있습니다.

npm install babel-core babel-loader babel-plugin-transform-runtime -D //변환 도구

npm install babel -preset-env babel -preset-stage-0 -D //Syntax

webpack.config.js

<span style="color: #000000">module:{ 
  rules:[       <span style="color: #ff0000"> {test:</span></span><span style="color: #ff0000">/\.js$/,use:&#39;babel-loader&#39;,<strong>exclude</strong>:/node_modules/</span><span style="color: #000000"><span style="color: #ff0000">}</span>
        //exclude是去掉不需要转换的包 <br/>　　]
}</span>

의 루트 디렉터리에 새로운 `.babelrc` `babel` 구성 파일을 만듭니다. 프로젝트(JSON 형식, 필수 JSON 사양 준수)

{    "plugins":["transform-runtime"],    "presets":["env","stage-0"]
}

4. webpack에서 템플릿을 사용할 때 .vue 파일을 구문 분석해야 합니다.

npm install vue-loader vue-template-compiler -D

Configuration in webpack.config.js

const VueLoaderPlugin = require('vue-loader/lib/plugin');module.exports = {
　　plugins:[
　　　　new VueLoaderPlugin(),
　　],　　module:{
　　　　rules:[
　　　　　　{test:/\.vue$/,use:'vue-loader'},
　　　　]　　
　　},
}

웹팩 상위 버전에서 vue-loader를 사용하는 경우 플러그인 구성(파란색 부분)이 필요합니다

위 내용이 이 글의 전체 내용입니다. 모든 분들의 학습에 도움이 되기를 바랍니다. 더 많은 관련 내용을 보시려면 PHP 중국어 웹사이트를 주목해주세요!

관련 추천:

모바일 날짜 및 선택 플러그인 mobiscroll

bootstrap-datatimepicker 플러그인 사용

위 내용은 webpack은 CSS와 다양한 로더를 가져옵니다.의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!