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 -yTypescript的相关安装
安装：cnpm install typescript ts-loader --save-devWebPack的安装
安装：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-devVue的相关安装
安装：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": "es5"//编译目标平台
},
"include": [//包含的编译目录
"src/**/*"
],
"exclude": [ //排出不编译的目录
"node_modules",
"**/*.spec.ts"
]
}提示：关于配置文件的详细 中文说明
创建：webpack.config.js
名称：webpack.config.js
文件位置:/
主要修改内容
原
替换/新增
const path = require('path');
const VueLoaderPlugin = require('vue-loader/lib/plugin'); //引入vue-loader库
module.exports = {
entry: './src/index.js', //配置启动的入口文件
devtool: 'cheap-module-eval-source-map',//不包含列信息，同时 loader 的 sourcemap 也被简化为只包含对应行的
module: {
rules: [
{ test: /\.vue$/, use: 'vue-loader' },//vue加载器
{
test: /\.tsx?$/, loader: 'ts-loader',//ts加载器
options: { transpileOnly: true, appendTsSuffixTo: [/.vue$/] } //认识vue文件
},
{ test: /\.css$/, loader: 'vue-style-loader!css-loader
' } //css加载器
]
},
output: {
filename: 'bundle.js',//输出的文件名称
path: path.resolve(__dirname, 'dist')//输出的目录名称
},
plugins: [
new VueLoaderPlugin() //vue-loader插件加载方式
],
devtool: '#eval-source-map'
};
- 我们这里只添加最需要的地方，其它一些高级功能会随着功能慢慢增加
- 详细的说明，请自行网络搜索
测试
一、让我们的VUE跑起来
修改配置文件
名称：package.json
文件位置:/
主要修改内容:增加该编译，可以使用热加载的服务器，使用即时预览功能。
原位置：”scripts”: 段
替换/新增
"dev":"webpack-dev-server --open --mode development"注意：–open参数是控制浏览器自动打开的，后面是可以添加参数“浏览器名称”，所以要注意其位置。
新建网页文件（承载VUE内容的容器）：
名称：index.html
文件位置:/
主要修改内容:只调用vue的主入口文件。
原位置：
替换/新增
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<title>webtsvuetitle>
head>
<body>
<div id="app">div>
<script src="/dist/bundle.js">script>
body>
html>新建VUE的模板文件
名称：App.vue
文件位置:/src
主要修改内容:用来呈现的具体内容
原位置：
替换/新增
<template>
<div id="app">
{{msg}}
div>
template>
<script>
export default{
name:'App',
data () {
return {
msg: 'Hello World'
}
}
}
script>
<style>
#app{
background-color:green;
}
style>
新建VUE的入口文件（启动VUE）
名称：index.js
文件位置:/src
主要修改内容:只负责调用一个VUE的模块
原位置：
替换/新增
import Vue from 'vue'
import App from './App.vue'
new Vue(
{
el:'#app',
render:h=>h(App)
}
)让程序正确跑起来
- 打开Vscode的终端(Ctrl+·)
webpack- 如果没有红色的字，就代表程序可以正常运行
- 此步骤会生成dist目录，必须先运行一下
npm run dev- 此时可以在自动弹出的页面上看见到Hello world
二、不用关心生成的最终JS的文件名称
修改配置文件
名称：webpack.config.js
文件位置:/
主要修改内容：增加一个HtmlWebpackPlugin插件
原：plugins的位置进行修改
替换/新增
const HtmlWebpackPlugin = require('html-webpack-plugin') //文件头部增加
module.exports = {
module: {
plugins: [
new VueLoaderPlugin() //vue-loader插件加载方式
,new HtmlWebpackPlugin({ //此部分新增加
filename: 'index.html',//需要自动注入的文件名称
template: 'index.html',//需要自动注入的模板的文件名称
inject: true//是否自动注入生成后的文件
})
]
};- 安装此插件，也是为了以后自动生成HASH值的JS文件做准备
- 以防每次生成的JS文件都一样，而导致的缓存 问题
修改主页面文件
名称：index.html
文件位置:/
主要修改内容：删除调用js的内容
删除原文件的内容：
<script src="/dist/bundle.js">script>再次运行
有些改动需要重启，有些改变可以即时预览，再次运行之前 要先将现有的退出（主要是修改webpack.config.js时）
* 在VSCODE的终端上
Ctrl+C- 以后不再提示
npm run dev三、使用TS来开发VUE
新建一个d.ts.js让VSCODE认识TS里面的VUE
名称：vue.shim.d.ts
文件位置:/src/
主要修改内容：
declare module '*.vue' {
import Vue from 'vue'
export default Vue
}调整主入口文件名称
名称：index.js
文件位置:/src/
主要修改内容：修改文件名称为
index.ts调整配置文件
名称：webpack.config.js
文件位置:/
主要修改内容
原：
entry: './src/index.js', //配置启动的入口文件替换/新增
entry: './src/index.ts', //配置启动的入口文件再次运行
npm run dev- 正如之前看见的页面是一样的
- 好，我们的ts也可以跑起来了，如何证明我们可以正常使用ts的功能呢?
四、增加TS的语法
创建一个vue的模块
名称：hello.vue
文件位置:/src/components/
主要修改内容：用来测试TS的模块
<template>
<div>
<div>欢迎您[<span class="visitor">{{marks}}span>]
来到Typescript的世界div>
<button @click="changed">换个人button>
div>
template>
<script lang="ts" src="./hello.ts">
script>
<style>
.visitor{
margin:1em;
color:blue;
font-size:15;
}
style>创建一个ts的模块
名称：hello.ts
文件位置:/src/components/
主要修改内容：使用强类型来创建一个类，并进行简单测试
//typescript部分
//定义的类
class Test {
public names: Array<string> = ["小王", "小强", "小张"];
idx: number = 0;
GetVisitor(): string {
this.idx++;
if (this.idx == this.names.length) {
this.idx = 0;
}
return this.names[this.idx];
}
}
//VUE部分
import Vue from "vue";
//创建Test对象
let tester = new Test();
export default Vue.extend({
name: 'Hello',
data() {
return {
marks: tester.GetVisitor(),
}
},
methods:
{
changed() {
this.marks = tester.GetVisitor();
}
}
});- 也可以直接写在hello.vue的script脚本块中
调整主入口文件
名称：app.vue
文件位置:/src
主要修改内容
原：
"app">
{{msg}}
...
name:'App', 替换/新增
<template>
<div id="app">
{{msg}}
<hello-component />
div>
template>
<script>
import HelloComponent from "./components/hello.vue"; //增
export default{
name:'App',
components:{HelloComponent}, //增
data () {
return {
msg: 'Hello World'
}
}
}
script>
好了再次运行
npm run dev- 点击 换个人 按钮
- 会发现，每次都换一个名字出现在页面上,即调用方法(事件)来改变页面上模板的值
五、最后让我们在vue中使用SCSS的模块
调整主入口文件
名称：app.vue
文件位置:/src
主要修改内容
原：
<style>
#app{
background-color:green;
}
style>
修改为
<style lang="scss">
$back-color:green;
#app{
background-color:$back-color;
}修改配置文件
名称：webpack.config.js
文件位置:/
主要修改内容：让vue正确处理scss
原：plugins的位置进行修改
替换/新增
module: {
rules: [ { test: /\.vue$/, use: 'vue-loader' },//vue加载器
{
test: /\.tsx?$/, loader: 'ts-loader',//ts加载器 options: { transpileOnly: true, appendTsSuffixTo: [/.vue$/] } //认识vue文件
},
{
test: /\.css$/, loader:'vue-style-loader!css-loader' }
]
},
修改为：
module: {
rules: [ { test: /\.vue$/, use: 'vue-loader' },//vue加载器
{
test: /\.tsx?$/, loader: 'ts-loader',//ts加载器 options: { transpileOnly: true, appendTsSuffixTo: [/.vue$/] } //认识vue文件
},
{
test: /\.css$/, loader:'vue-style-loader!css-loader' },
{
test:/\.scss$/, //增加，解析lang=scss的内容 loader:'vue-style-loader!css-loader!sass-loader' //这里不可以少，也折腾了好久，千万不要使用loader:'sass-loader'的形式 }
]
},
好了再次运行
npm run dev- 发现SCSS已经可以正常编译了
五、调用外部scss文件
调整主入口文件
名称：app.vue
文件位置:/src
主要修改内容
原：
<style lang="scss">
$back-color:green;
#app{
background-color:$back-color;
}
style>
修改为
<style lang="scss" >
@import url('assets/style/public.scss');
style>
创建公共SCSS文件
名称：public.scss
文件位置:/assets/style
添加内容:将从APP.VUE， 移出来的内容放到这里
$back-color:green;
#app{
background-color:$back-color;
}好了再次运行
npm run dev带有绿色背景的页面再次出现了，scss文件中可以使用scss带来的各种优点了
六、将生成的样式表从生成的JS文件中分离到CSS文件
修改配置文件
名称：webpack.config.js
文件位置:/
主要修改内容：增加一个extract-text-webpack-plugin插件
原：删除.css的处理部分
{ test: /\.css$/, loader: 'vue-style-loader!css-loader' } //css加载器原：
{
test:/\.scss$/, //增加，解析lang=scss的内容
loader:'vue-style-loader!css-loader!sass-loader' //这里不可以少，也折腾了好久，千万不要使用loader:'sass-loader'的形式
},替换/新增
const ExtractTextPlugin = require('extract-text-webpack-plugin') //文件头部增加
module.exports = {
module: {
rules: [
//以下内容是修改的
{
test: /(\.css$|\.scss$)/, //修改这里让.css和.scss都在这里处理
use: ExtractTextPlugin.extract({
fallback: 'style-loader',//使用style-loader
//resolve-url-loader may be chained before sass-loader if necessary
use: ['css-loader', 'sass-loader']//去掉vue-style-loader 不要让该插件来处理
})
}
//到尾部
]，
plugins: [
new VueLoaderPlugin()
,new HtmlWebpackPlugin({
filename: 'index.html',//需要自动注入的文件名称
template: 'index.html',//需要自动注入的模板的文件名称
inject: true//是否自动注入生成后的文件
})
,new ExtractTextPlugin('style.css') //此部分新增加
]
};直接编译并查看结果
webpack此时查看/dist目录下多了一个style.css文件并查看其内容
#app {
color: green;
}
.visitor {
margin: 1em;
color: blue;
font-size: 15;
}最后一点就是局部CSS的实现
调整主入口文件
名称：app.vue
文件位置:/src
主要修改内容
原：
<style lang="scss" >
@import url('assets/style/public.scss');
style>
修改为
<style lang="scss" scoped> //是的，我们只是增加了一个scoped的声明
@import url('assets/style/public.scss');
style>直接编译并查看结果
webpack此时再一次打开/dist目录下的style.css文件并查看其内容，发现编译成功了，但是内容错了
$back-color:green;
#app{
background-color:$back-color;
}
.visitor {
margin: 1em;
color: blue;
font-size: 15;
}调整主入口文件
名称：app.vue
文件位置:/src
主要修改内容
原：
<style lang="scss" scoped> //是的，我们只是增加了一个scoped的声明
@import url('assets/style/public.scss');
style>
修改为:
<style lang="scss" src="./assets/style/public.scss" scoped>
style>
改变了引用外部文件的形式
直接编译并查看结果
webpack此时再一次打开/dist目录下的style.css文件并查看其内容，发现已经正确了
.visitor {
margin: 1em;
color: blue;
font-size: 15;
}
#app[data-v-7ba5bd90] {
background-color: green;
}搭建总结
教训
- 因为顺序和原理的不清晰，导致搭建过程的混乱，又重新看过了很多重要的参数后，多次试验才将这个环境搭建起来。
- 不懂原理就上手，会走过很多弯路，但是每个人的学习特点不同，而像我这种笨人，就必须从错误中出发才会记住。
- 模块的一些作用都不懂，真是步步艰辛，再加上新的版本和老版本还有区别，所以更加艰难
心得：
- 先要让VUE运行起来
- 然后再让TS识别出VUE
- 加入辅助组件并调试
- npm install –save-dev 可以简写为npm i -D
- vue-cli或者其它git上有很多现成的模板，但是经过本次搭建，会让我们对vue,ts,webpack都有进一步的了解，让后续的工作会更顺手而做准备。
- 模块安装的顺序还是很重要的，因为安装的时候，出现红色的警告，可能就要重新安装一次，比如先安装sass-loader再安装webpack就会出现红色的警告
- 打开VSCODE的AUTO SAVE是挺方便，但是也要机器的配置能跟上，否则每次改动都会非常卡,当然了，也可以设置扫描的间隔和不扫描的文件夹
问题：
- 模块的依赖问题，这里我将所有依赖的模块都安装好，就不会出现模块的问题
- webpack.config.js配置文件中的问题，vue-loader 15以后的加载方式有变化 ，这里需要注意一下
- const VueLoaderPlugin = require(‘vue-loader/lib/plugin’);
- plugins: [ new VueLoaderPlugin() ],
- webpack.config.js配置文件中的ts-loader需要添加,下面内容，以便让ts认识vue的模块
- options: {transpileOnly: true, appendTsSuffixTo: [/.vue$/]}
- 在ts文件中import Vue from ‘vue’ 提示 cannot find module ‘vue’时，应该就是tsconfig.json里面出错了，我本次出错的位置是
原 ：”module”: “system”,
修改为：”module”: “es2015”, - 一般出现 ……throw err ^ cannot find module ‘。。。。’,的时候， 就是该模块没有安装正确
- npm安装时，会出现 404错误，这是因为服务器是linux系统，对大小写敏感，所以都使用小写一般就不会有问题。
- 前端真是要命，就一个scss的问题，折腾了好几个小时，好多也不说为什么加这段，或者按照网上加完了还是不行，真是挺郁闷的
- 局部导入SCSS文件真是把我折腾够够的了
- @import url这种形式不可以
- 最后发现使用src这种形式可以，具体原理就不说了，因为我也不知道^_^
- 最后发现可能是在之前一直没有安装node-sass的原因
- loader是“链式”编程，也就是在配置中每个LOADER都处理一遍，直到最后一个(个人理解的请查正式的文档
技巧
- 如果出现了，安装某个模块以后，一直提示安装好多不认识的模块，就可能是依赖出现 问题了，或者安装错了，不要犹豫
- 删除node_modules
- 删除package.json中不认识的模块
- 运行npm install
- 再次运行webpack会发现已经恢复正常了
- 如果官方文档很容易 看的情况下，尽量去看官方，因为新的版本的使用方法官方才可以解决好多版本问题
最后
- 本笔记经过多次测试才敢发布
- 要向大神一样的写文章的风格
- 向写书一样的心态去发表文章
快速试验
cnpm i -D typescript ts-loader webpack webpack-cli sass node-sass sass-loader webpack-dev-server html-webpack-plugin vue vue-loader vue-template-compiler css-loader style-loader vue-style-loader extract-text-webpack-plugin@4.0.0-beta.0