- package.json代码
{
"name": "coment",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"build": "webpack"
},
"author": "",
"devDependencies": {
"file-loader": "^6.2.0",
"less": "^4.1.1",
"less-loader": "^8.0.0",
"style-loader": "^2.0.0",
"url-loader": "^4.1.1",
"vue-template-compiler": "^2.6.12",
"webpack": "^5.23.0",
"webpack-cli": "^4.5.0"
},
"dependencies": {
"@babel/core": "^7.2.0",
"@babel/preset-env": "^7.12.17",
"babel-loader": "^8.0.0-beta.0",
"css-loader": "^5.0.2",
"vue": "^2.6.12",
"vue-loader": "^14.2.2",
"vue-style-loader": "^4.1.2"
}
}
2.Vue文件代码
<template>
<div>
<h2 class="title">{{message}}</h2>
<button @click="btnClick">按钮</button>
<h2>{{name}}</h2>
<Cpn/>
</div>
</template>
<script>
import Cpn from './Cpn'
export default {
name: "App",
components: {
Cpn
},
data() {
return {
message: 'Hello Webpack',
name: 'coderwhy'
}
},
methods: {
btnClick() {
}
}
}
</script>
<style scoped>
.title {
color: green;
}
</style>
3.webpack.config.json代码
const path = require("path")
module.exports = {
entry: "./src/main.js",
output: {
path: path.resolve(__dirname, 'dist'),
filename: "bundle.js"
//publicPath:"dist/" 配置文件默认路径
},
module: {
rules: [
{
test: /\.css$/,
//使用loder时是从右向左的
use: ['vue-style-loader','style-loader' ,'css-loader']
},
{
test: /\.less$/,
use: [{loader:"vue-style-loader"},{
loader: "style-loader"
}, {
loader: "css-loader"
}, {
loader: "less-loader"
}]
},
{
test: /\.(png|jpg|gif|jpeg)$/,
use: [
{
loader: 'url-loader',
options: {
//限制文件大小
//当加载图片小于limit时,会将图片编译为base64字符串格式,大于limit时需要使用file-loader进行加载
limit: 8196,
name: 'img/[name].[hash:8].[ext]'
}
}
]
},
{
test: /\.js$/,
//exclube 排除
//include 包含
exclude: /(node_modules|bower_components)/,
use: {
loader: 'babel-loader',
options: {
presets: ['@babel/preset-env']
}
}
},
{
test: /\.vue$/,
use: ['vue-loader']
}
]
},
resolve: {
//alias 别名
extensions: ['.js', '.css', '.vue'],
alias: {
'vue$': "vue/dist/vue.esm.js"
}
}
}
最后附上效果图![上传中...]()
希望各位大佬行行好,帮我看一下到底问题出在那
写错了
既然你都注释了从右往左,正确的解析应该是:
先用
vue-loader
来解析.vue
的样式转成css
然后是
css-loader
解析css
样式再然后是
style-loader
将css
加到html
里所以正确的顺序是: