目录
基本概念
代码与实例
基本概念
通过在webpack.config.js这个文件中添加module rules进行如下代码：
这里分别是加载vue，以及css，和styl样式和图片
styl用于css预处理，模块化编写css
这里还要说下图片，这里的options为其他的选项，比如：
test: /\.(gif|jpg|jpeg|png|svg)$/,use: [{loader: 'url-loader',options:{limit: 1024,name: '[name] aaa.[ext]'}}]
这里限制图片大小为1024，大了的用base64压缩，把名字打包为[name] aaa.[ext]
如下添加的图片和css、styl在bundle.js中都能找到
他会将其中的内容都放到bundle.js中
代码与实例
文件结构如下：
源码如下：
test-stylus.styl
bodyfont-size: 20px
test.css
body{color: red;background-image: url('../images/gen.svg')}
app.vue
<template><div id="test">{{text}}</div></template><script>export default {data(){return {text: "abc"}}}</script><style>#test{color: red;}</style>
index.js
import Vue from 'vue'import App from './app.vue'import './asserts/images/bg.jpg'import './asserts/styles/test.css'import './asserts/styles/test-stylus.styl'const root = document.createElement('div')document.body.appendChild(root)new Vue({render: (h) => h(App)}).$mount(root)
package.json
{"name": "vuetestdemo","version": "1.0.0","description": "","main": "index.js","scripts": {"test": "echo \"Error: no test specified\" && exit 1","build": "webpack --config webpack.config.js"},"author": "","license": "ISC","dependencies": {"css-loader": "^3.1.0","file-loader": "^4.1.0","style-loader": "^0.23.1","stylus": "^0.54.5","stylus-loader": "^3.0.2","url-loader": "^2.1.0","vue": "^2.6.10","vue-loader": "^15.7.1","vue-template-compiler": "^2.6.10","webpack": "^4.39.1","webpack-cli": "^3.3.6"}}
webpack.config.js
const path = require('path')const VueLoaderPlugin = require('vue-loader/lib/plugin');module.exports = {entry: path.join(__dirname, 'src/index.js'),output: {filename: 'bundle.js',path: path.join(__dirname, 'dist')},module:{rules:[{test: /\.vue$/,loader: 'vue-loader'},{test: /\.styl/,use: ['style-loader','css-loader','stylus-loader']},{test: /\.css$/,// use: ['vue-style-loader', 'css-loader', 'style-loader'] use: ['style-loader','css-loader']},{test: /\.(gif|jpg|jpeg|png|svg)$/,use: [{loader: 'url-loader',options: {limit: 1024,name: '[name] aaa.[ext]'}}]}]},plugins: [new VueLoaderPlugin()]}
