webpack導入css及各項loader

這篇文章主要介紹了關於webpack導入css及各項loader，有著一定的參考價值，現在分享給大家，有需要的朋友可以參考一下

webpack導入css

1) 下載相關的載入器 npm install style-loader css-loader -D

2）將index.css引入mian.js

#

import './css/index.css'

3) 設定webpack.config.js

使用module屬性

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中引入babel

對於部分瀏覽器不識別的高級的ES6語法，借助`babel` 轉換

npm install  babel-core  babel-loader  babel-plugin-transform-runtime  -D   //轉換工具

npm install  babel-preset-abelenv preset-abelenv. -0  -D   //語法

在webpack.config.js中設定

<span style="color: #000000">module:{ 
  rules:[       <span style="color: #ff0000"> {test:</span></span><span style="color: #ff0000">/\.js$/,use:'babel-loader',<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

在webpack.config.js中的設定

##

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

#高版本的webpack使用vue-loader的時候都需要設定下插件（標藍部分）

以上就是本文的全部內容，希望對大家的學習有所幫助，更多相關內容請關注PHP中文網！

相關推薦：

 

行動裝置日期及選擇外掛程式mobiscroll

bootstrap-datatimepicker外掛程式的使用

#

以上是webpack導入css及各項loader的詳細內容。更多資訊請關注PHP中文網其他相關文章！