WebPack 4 +TypeScript 3 +Vue 2.5+SCSS 简单环境搭建

开发环境

• VSCODE
• NPM包管理工具

环境

名称：node 版本:10.7.0
名称：npm 版本:6.1.0
名称：webpack 版本:4.16.5
名称：typescript 版本:3.0.1
名称：sass 版本:3.5.7

试验软件/包

名称：vue 版本:3.0.0-rc.11
名称：typescript 版本:3.0.1

安装步骤

项目的初始化

mkdir webtsvue
cd webtsvue
mkdir src
cd src
mkdir components
mkdir assets
cd assets
mkdir style
cd ..
cd..
npm init -y

Typescript的相关安装

安装：cnpm install typescript ts-loader --save-dev

WebPack的安装

安装：cnpm install webpack webpack-cli  --save-dev

注意：全局安装WebPack也要在安装一次，否则css-loader会无效，webpack-cli 和webpack-cmmand 这2个模块是辅助模块，在开发时使用的，否则npm run …的时候无法运行

SASS的安装

安装：cnpm install sass node-sass sass-loader --save-dev

• sass如果不使用可以不安装，因为如果安装SASS只为了在安装Webapck不显示fsevent的错误提示。fsevent模块是在MACOS操作系统下使用的，其它操作系统下无效所以才会报错,但是这样先安装SASS的情况下
• node-sass是sass-loader依赖的模块，必须安装

WebPack-Dev-Server热更新（即时预览模块）的安装

安装：cnpm install webpack-dev-server  --save-dev

注意：这个必须在全局安装一次，否则在运行时可能会出现无法找到路径的错误

HtmlWebpackPlugin插件的安装

• 该插件主要用于将生成的经过HASH以后生成的JS文件自动插入到主页面
• 省去每次手动调整文件的烦恼

安装：cnpm install html-webpack-plugin --save-dev

Vue的相关安装

安装：cnpm install vue vue-loader vue-template-compiler css-loader vue-style-loader --save-dev

注意：vue-loader需要css-loader和vue-template-compiler,写style的时候需要vue-style-loader

将CSS单独打包插件

安装：cnpm install style-loader
 extract-text-webpack-plugin@4.0.0-beta.0  --save-dev

注意：因为写该教程的时候，默认还是3.0不支持WEBPACK4，所以要强制版本
style-loader这个加载器是分享CSS文件的插件需要的

让TS认识VUE的相关安装（没有生效，不需要此步骤）

安装：cnpm install @types/vue --save-dev

注意：我这边安装完以后，在VSCODE中还是提示无法找到VUE，所以还是使用原来的办法，添加一个.d.ts的声明文件

安装完成的检测

• 通过package.json可以看出本次试验的模块的相关版本号
• 可以对名称，版本号，项目描述进行修改
• 模块的版本很重要

{
  "name": "webtsvue",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "css-loader": "^1.0.0",
    "html-webpack-plugin": "^3.2.0",
    "sass": "^1.10.4",
    "sass-loader": "^7.1.0",
    "ts-loader": "^4.4.2",
    "typescript": "^3.0.1",
    "vue": "^2.5.17",
    "vue-loader": "^15.3.0",
    "vue-style-loader": "^4.1.1",
    "vue-template-compiler": "^2.5.17",
    "webpack": "^4.16.5",
    "webpack-cli": "^3.1.0",
    "webpack-dev-server": "^3.1.5"
  }
}

配置文件

创建配置文件

创建：tsconfig.json（开始用不上，但是该文件创建后无需要变动）

名称:tsconfig.json
文件位置:/
原
替换/新增：

{
    "compilerOptions": {
        "module": "es2015",//组织代码方式       
        "noImplicitAny": true,//为true时，将进行强类型检查，无法推断类型时，提示错误。
        "strict": true, //启用所有严格类型检查选项。
        "noImplicitReturns": true,  //true 时，不是函数的所有返回路径都有返回值时报错
        "removeComments": true, //编译生成的 JavaScript 文件是否移除注释
        "preserveConstEnums": true,
        "sourceMap": true, //编译文件对应关系
        "moduleResolution": "node",//决定如何处理模块。
        "target":