搭建webpack时遇到的问题

记录我在上篇文章基于vue+webpack的开发环境的搭建时遇到的一些问题和解决的办法

问题一：

问题描述：
如果在用 webpack 打包的过程中出现一些如下一些不知名错误时，或者提示安装的依赖和插件不匹配时，则很有可能是安装的插件或者依赖的版本不匹配

解决办法：

下面是我搭建该环境时安装的插件依赖的版本，可以在package.json文件中查看

{
  "name": "04-webpack",
  "version": "1.0.0",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build": "cross-env NODE_ENV=product webpack --config webpack.config.js",
    "dev": "cross-env NODE_ENV=development webpack-dev-server --config webpack.config.js"
},
  "author": "",
  "license": "ISC",
  "dependencies": {
    "cross-env": "^5.1.3",
    "css-loader": "^0.28.7",
    "file-loader": "^1.1.11",
    "html-webpack-plugin": "^2.30.1",
    "style-loader": "^0.19.1",
    "stylus": "^0.54.5",
    "stylus-loader": "^3.0.1",
    "url-loader": "^0.6.2",
    "vue": "^2.5.13",
    "vue-loader": "^13.6.0",
    "vue-template-compiler": "^2.5.13",
    "webpack": "^3.10.0",
    "webpack-dev-server": "^2.9.7"
  },
}

想要更改已安装插件版本时可直接在该文件中修改版本信息并在命令行中输入以下命令，即可替换版本

npm i

问题二：webstorm上.vue文件stylus语法不支持

问题描述：

<style lang = "stylus" scoped>
    .tabs 
        width 200px
        display flex
        justify-content space-around
        *
            display inline-block;
            padding 0 10px
            cursor pointer
</style>

stylus语法应该是可以如上面例子写的这样实现的，但是我刚开始写的时候会报错，但是就在网上搜了很多解决的办法，大多都是说把style标签改一下

• <style rel="stylesheet/stylus" lang = "stylus" scoped>

• <style rel="stylesheet/stylus" scoped>

• <style rel="stylesheet/stylus" lang = "stylesheet/stylus" scoped>

我在网上看的大概就这几种方法吧，但是我全都试过，并不能解决这个问题，该报错的还是照样报错，而且当时正是考试周，就把这个问题放了一周没管它(╯︵╰)

解决方法

下载最新版本的webstorm。

没错，我后来重新安装了新版本的webstorm，就解决了这个问题。可能2018.x.x的都可以吧，反正我现在装的是（2018.1.5）版本的，可以支持stylus语法。嗯，就这样ヽ(ー_ー)ノ