按照老師的課程學(xué)習(xí)，npm run dev啟動(dòng)的devserver里css文件生效了，但是.vue文件的template和script代碼不生效，style樣式反而打包了。

webpack.config.js：

const?path?=?require('path');
//?const?{?VueLoaderPlugin?}?=?require("vue-loader");
const?VueLoaderPlugin?=?require('vue-loader/lib/plugin');
const?HTMLPlugin?=?require('html-webpack-plugin');
const?webpack?=?require('webpack');

const?isDev?=?process.env.NODE_ENV?===?'development'

const?config??=?{
??????target:'web',
??????entry:?path.join(__dirname,'src/index.js'),
??????output:{
??????????filename:?'bundle.js',
??????????path:?path.join(__dirname,'dist'),
??????},

?????module:{
???????????rules:[
???????????????{
???????????????????test:?/\.vue$/,
???????????????????loader:'vue-loader'
????????????????},
???????????????{
???????????????????test:?/\.css$/,
???????????????????//?loader:'style-loader!css-loader!postcss-loader',
???????????????????//?loaders:[]
???????????????????use:?[
???????????????????????'style-loader',
???????????????????????'css-loader'
???????????????????]
???????????????},
???????????????{
???????????????????test:?/\.styl/,
???????????????????use:?[
???????????????????????'style-loader',
???????????????????????'css-loader',
???????????????????????'stylus-loader'
???????????????????]
???????????????},
???????????????{
???????????????????test:?/\.(gif|jpg|jpeg|png|svg)$/,
???????????????????//?loader:'style-loader!css-loader!postcss-loader',
???????????????????//?loaders:[]
???????????????????use:?[
???????????????????????{
???????????????????????????loader:'url-loader',
???????????????????????????options:{
???????????????????????????????limit:1024,
???????????????????????????????name:'[name]-aaa.[ext]'
???????????????????????????}
???????????????????????}
???????????????????]
???????????????},
???????????],

?????},

????plugins:[
????????new?webpack.DefinePlugin({
????????????'process.env':{
????????????????NODE_ENV:?isDev???'"development"':?'"production"'
????????????}
????????}),
????????new?VueLoaderPlugin(),
????????new?HTMLPlugin()
????],

????//?mode:?'development'?//設(shè)置mode



}

if(isDev){
????config.devtool?=?'#cheap-module-eval-source-map'//瀏覽器調(diào)試
????config.devServer?=?{
????????port:8000,
????????host:'0.0.0.0',//別人的電腦也能訪問(wèn)到
????????overlay:{
????????????errors:?true,
????????},
????????open:?true,
????????//?historyFallback:{
????????//
????????//?},//沒(méi)有設(shè)置地址的路由映射到指定的地址，如index.html
????????hot:?true
????}
????config.plugins.push(
????????new?webpack.HotModuleReplacementPlugin(),
????????new?webpack.NodeEnvironmentPlugin()
????)//熱加載依賴
}

module.exports?=?config

index.js:

/**
?*?Created?by?59864?on?2020/10/11.
?*/
import?Vue?from?'vue'
import?App?from?'./app.vue'

import?'./assets/styles/test.css'
import?'./assets/styles/test-stylus.styl'
import?'./assets/images/1.png'

const?root?=?document.createElement('div')
document.body.appendChild(root)

new?Vue({
????render:?(h)?=>?(App)
}).$mount(root)

app.vue:

<template>
????<div?id="text">{{text}}
????<span>123</span>
????</div>

</template>

<script>
????export?default{
????????data(){
????????????return?{
????????????????text:'abc'
????????????}
????????},
????????mounted(){
????????????alert(1);
????????????console.log(123);
????????},
????}
</script>

<style>
#text{
????color:?black;
????width:?100px;
????height:?200px;
}
</style>

package.json：

{
??"name":?"vue-webpack",
??"version":?"1.0.0",
??"description":?"",
??"main":?"index.js",
??"scripts":?{
????"test":?"echo?\"Error:?no?test?specified\"?&&?exit?1",
????"build":?"cross-env?NODE_ENV=production?webpack?--config?webpack.config.js",
????"dev":?"cross-env?NODE_ENV=development?webpack-dev-server??--config?webpack.config.js"
??},
??"author":?"",
??"license":?"ISC",
??"dependencies":?{
????"cross-env":?"^7.0.2",
????"file-loader":?"^6.2.0",
????"html-webpack-plugin":?"^4.5.0",
????"stylus":?"^0.54.8",
????"stylus-loader":?"^4.2.0",
????"url-loader":?"^4.1.1",
????"vue":?"^2.6.12",
????"vue-loader":?"^15.9.5",
????"vue-template-compiler":?"^2.6.12",
????"webpack":?"^4.32.2"
??},
??"devDependencies":?{
????"css-loader":?"^4.3.0",
????"style-loader":?"^2.0.0",
????"webpack-cli":?"^3.3.2",
????"webpack-dev-server":?"^3.5.1"
??}
}