Vue之webpack打包CSS图片字体

初始化：

npm init -y

安装webpack

npm install webpack webpack-cli --save-dev

安装vue

npm i --save-dev  vue vue-loader vue-template-compiler

安装css的插件

npm install --save-dev style-loader css-loader

npm install --save-dev file-loader

webpack.config.js 配置文件

const path = require('path');
const VueLoaderPlugin = require('vue-loader/lib/plugin');module.exports = {entry: './src/main.js',output:{path: path.resolve(__dirname,'dist'),filename :'bundle.js'},plugins:[new VueLoaderPlugin()],  module:{rules:[{  test:  /\.vue$/,  use:'vue-loader'},{test: /\.css$/,use: ['vue-style-loader','css-loader']},{test: /\.(png|svg|jpg|gif)$/,use:[{loader:'file-loader',options: {esModule: false,}}]}]},resolve:{alias:{"vue$":"vue/dist/vue.js"}}}

index.html

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title>
</head>
<body><div id="app"><p>{{msg}}</p></div><script src="../dist/bundle.js"></script>
</body>
</html>

main.js

import Vue from 'vue'
import app from './app.vue'var vm = new Vue({el: '#app',data: {msg: '123'},render:c=>c(app)})

app.vue

<template>
<div><div class="example">{{ msg }}</div><img src="./image/1.gif">
</div>
</template><script>
export default {data () {return {msg: 'Hello world!'}}
}
</script><style>
.example {color: red;
}
</style>

Vue之webpack打包CSS图片字体相关推荐

webpack打包css image,webpack 打包CSS 引入图片
加载css 安装style-loader, css-loader npm install style-loader css-loader --save-dev 配置webpack.config.js文 ...
Vue+Vue Router+Webpack打包网站基础页面
Vue+Vue Router+Webpack打包网站基础页面 1.目录结构 2.package.json所需依赖包 {"name": "vue_router_webpac ...
上传服务器后字体文件丢失,详解Vue+elementUI build打包部署后字体图标丢失问题...
错误描述: Vue+elementUI build打包部署后字体图标丢失,控制台显示文件element-icons.woff和element-icons.ttf文件404 错误展现: 控制台报错截图 ...
Vue项目webpack打包部署到服务器
Vue项目webpack打包部署到服务器这篇博文主要说的就是我今天遇到的问题,而且在经过我的询问,好多人在打包部署的时候都遇到了一些问题,下面就来说下,如何将Vue项目放置在服务器上,这里以Tomc ...
webpack打包css
webpack打包 1.打包css 2.打包逻辑 1-1.webpack打包css逻辑 3.打包css 4.打包成独立的css文件 5.添加样式前缀 6.格式校验 7.压缩css 8.我们为什么要用这 ...
解决webpack打包bootstrap报字体不能解析问题
解决webpack打包bootstrap报字体不能解析问题参考文章: (1)解决webpack打包bootstrap报字体不能解析问题 (2)https://www.cnblogs.com/zero ...
php项目webpack打包,Vue项目webpack打包部署时Tomcat刷新报404错误问题如何处理
这次给大家带来Vue项目webpack打包部署时Tomcat刷新报404错误问题如何处理,Vue项目webpack打包部署时Tomcat刷新报404错误问题处理的注意事项有哪些,下面就是实战案例,一起 ...
Vue——10 - webpack打包保姆级教程01——打包js、json、css、less、html、背景图片以及图片、字体（Font）文件，devsever，生产环境配置以及css的兼容写法
目录一.webpack打包JS文件 1.新建入口文件index.js和mathUtils.js,index.js是依赖于mathUtils.js 2.然后使用webpack命令打包js文件二.打包 ...
webpack打包:文件+图片+图标字体......
webpack是什么? webpack本质是一个第三方的模块包,用于分析,并打包代码. 支持所有类型的文件包支持less/sass转换成css 支持ES6/7/8降级为ES5:(为什么降级?是为了更 ...

Vue之webpack打包CSS图片字体

Vue之webpack打包CSS图片字体相关推荐

最新文章

热门文章