Step 1
首先,我们需要修改webpack.config.js,修改如下:
...
module:{
rules:[//webpack package rules
{
test:/\.(js|jsx)$/,//当webpack 打包用到的是JS|jsx文件时,就用babel-loader来编译
exclude:/node_modules/,//排除node_modules文件里的js
use:{
loader:'babel-loader'
}
},
{
test:/\.(css|scss)$/,//当webpack碰到的是.sass、.css文件,就用style-loader、cssloader来编译
exclude:/node_modules/,
use:['style-loader','css-loader',"sass-loader"]
}
]
},
resolve:{
modules:['node_modules'],
extensions:['.js','.jsx','.json'],//当我们在文件中import js 或者 jsx 文件时,添加这个配置可以不写.js.jsx后缀名
alias:{
'@':path.resolve('src')//用@符号代表src目录,在vue里面经常这么