您当前的位置： 首页 > 学无止境 > JS经典实例 网站首页JS经典实例

webpack解析css及图片

发布时间：2020-04-04 12:03:38编辑：雪饮阅读（）

 

所需依赖

Css:

npm i css-loader style-loader –D

图片:

npm i url-loader file-loader –D

App.js

//当前目录的一个图片文件
import imgSrc from './7.jpg'
var App={
    template:`<div><img :src="imgSrc"></div>`,
    data(){
        return {imgSrc:imgSrc}
    }
}
export default App;

Main.js

import './main.css'
 import Vue from './vue.js'
 import App  from './App.js'
 new Vue({
     el:'#app',
     components:{
         App:App
     },
     template:'<App/>'
 })

main.css

body{
 background-color: pink;
 }

webpack.dev.config.js

 // webpack ./main.js  ./build.js
 module.exports = {
    entry:{
       "main":'./main.js'
    },
    output:{
       filename:'./build.js'
    },
    watch:true,
    // 声明模块
    // 包含各个loader
    module:{
       loaders:[
          {
             // /遇到后缀为.css的文件，webpack先用css-loader加载器去解析这个文件
             // 最后计算完的css，将会使用style-loader生成一个内容为最终解析完的css代码的style标签，放到head标签里。
             // webpack在打包过程中，遇到后缀为css的文件，就会使用style-loader和css-loader去加载这个文件。
             //loader顺序是从右向左
             test:/\.css$/,
             loader:'style-loader!css-loader'
          },
          {
             test:/\.(jpg|png|jpeg|gif|svg)$/,
             loader:'url-loader?limit = 3000'
          }
 
       ]
    }
 }

效果