webpack導入css及各項loader-js教程-PHP中文網

webpack導入css及各項loader

不言

發布： 2018-07-09 17:32:46

原創

1397 人瀏覽過

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

webpack導入css

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

2）將index.css引入mian.js

import &#39;./css/index.css&#39;

登入後複製

3) 設定webpack.config.js

使用module屬性

const path = require(&#39;path&#39;)

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

登入後複製

##重啟執行`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(&#39;../Images/1.jpg&#39;)  
}

登入後複製

#配置webpack.config.js

module:{ 
    rules:[ 
        {test:/\.css$/,use:[&#39;style-loader&#39;,&#39;css-loader&#39;]},        {test:/\.(jpg|png|gif|bmp|jpeg)$/,use: url-loader?limit=4000&name=[hash:8]-[name].[ext]&#39; },　　　　 //如果图片大于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:&#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

在webpack.config.js中的設定

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

登入後複製

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

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