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）