ts下webpack安装环境步骤

vscode下创建支持typescript部分 ( cnpm 是淘宝镜像 http://npm.taobao.org )
(cnpm 安装命令：npm install -g cnpm --registry=https://registry.npm.taobao.org)
——————————————————————————————————————————————
1.打开nodejs 全局安装 cnpm install -g typescript 退出nodejs

2.打开vscode,以 打开文件夹的方式 打开空项目目录并创建tsconfig.json文件

{
"compilerOptions": {
"module": "commonjs",
"target": "es5",
"sourceMap": false,
"outDir": "./src/js"
},
"exclude": [
"node_modules"
]
}

3.随便个目录创建个ts文件夹，然后随便创建个TS文件，输入代码保存

4.点击 终端 - 运行任务 - tsc:监视 - tsconfig.json 然后就自动生成了JS文件了

vscode下创建webpack部分
——————————————————————————————————————————————
1.先cnpm init 自动创建nodejs配置文件package.json

2. cnpm install webpack webpack-cli typescript ts-loader --save-dev

3.在同目录新建 webpack.dev.config.js 写入配置：
const path = require('path');
module.exports={
entry:'./src/js/0.js',
output:{
//path:__dirname,
path: path.resolve(__dirname, "web/js/"),
filename:'bundle.js'
}
}

4.修改package.json
"scripts": {
"test": "test",
"dev": "webpack --config ./webpack.dev.config.js --mode development"//这里是新增
},

5.cnpm run dev 运行测试是否通过

6.安装webpack依赖 cnpm install webpack-dev-server html-webpack-plugin --save-dev

7.修改配置文件webpack.dev.config.js

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
entry: './src/js/0.js',
output: {
path: path.resolve(__dirname, "web/js/"),
filename:'bundle.js'
},
plugins:[
new HtmlWebpackPlugin({
template:'./web/index.html'
})
],
devServer:{
contentBase:path.join(__dirname,'./web'),//根目录
open:true,//自动打开浏览器
port:9000
}
}

8.修改package.json
"scripts": {
"test": "test",
"dev": "webpack-dev-server --config ./webpack.dev.config.js --mode development"//这里是修改的
},

9.运行命令 cnpm run dev ，即开浏览器可以同步调试代码了(ctrl+c 终止服务)

 

----------------------------------------------------------------------------------
如果是因为版本问题，请安装此软件：
先安装nvm
nodejs里安装运行：cnpm install -g nvm
nvm 安装目录:C:\Users\Administrator\AppData\Roaming\nvm
运行 nvm.exe生成setting.txt
增加两行
node_mirror:https://npm.taobao.org/mirrors/node/
npm_mirror:https://npm.taobao.org/mirrors/npm/

nvm list 查看安装的那些版本
nvm -v 版本
nvm install 6.0.0 安装版本
nvm use 6.0.0 使用版本

node -v 查看当前node版本 （8.12.0）