webpack配置vue环境

安装 vue

---

npm i vue

---

安装 vue-loader

---

你应该将 vue-loader 和 vue-template-compiler 一起安装——除非你是使用自行 fork 版本的 Vue 模板编译器的高阶用户：

npm i -D vue-loader vue-template-compiler

---

---

webpack 配置

webpack.config.js
const VueLoaderPlugin = require(‘vue-loader/lib/plugin’)

module.exports = {
module: {
rules: [

{
test: /.vue\$/,
loader: ‘vue-loader’
}
]
},
plugins: [

new VueLoaderPlugin()
]
}

---

解析

---

模块解析的时候可以省略扩展名

自动解析确定的扩展

webpack.config.js

module.exports = {

resolve: {
extensions: [‘.wasm’, ‘.vue’, ‘.js’, ‘.json’]
}
};

能够使用户在引入模块时不带扩展

---

sass-loader

---

加载和转译 SASS/SCSS 文件

npm install sass-loader node-sass

<style lang="scss" scoped>

.hello{
    h1{
      color:rgb(103, 235, 70)
    }
}

---

devServer

---

{

当使用 HTML5 History API 时，任意的 404 响应都可能需要被替代为 index.html
devServer.historyApiFallback 默认禁用
  historyApiFallback: true
  
当使用内联模式(inline mode)时，会在开发工具(DevTools)的控制台(console)显示消息，例如：在重新加载之前，在一个错误之前，或者 模块热替换(Hot Module Replacement) 启用时。默认值是 info。

  clientLogLevel: 'none'
}

---