webpack基础配置

学习了typescript里webpack部分 下面就写一下webpack的基础配置

首先安装webpack及相关配置 

npm i -D webpack webpack-cli typescript ts-loader package.json里deDependencier就会出现这些

webpack init 初始化后就会出现node_modules文件

npm i -D webpack-dev-server //安装这个就会自动生成新的运行文件 需要在package.json里的scripts里加上’start‘:'webpack serve --open chrome.exe'

然后创建一个webpack.config.js文件 内容如下：

const path = require('path')； //用于拼接路径

module.exports = {

entry:'./src/index.ts/' //入口文件

//指定打包文件所在目录

output{

//指定打包文件的目录

path:path.resolve( _ _ dirname,'dist')

//打包文件的文件

filename:'bundle.js'

}，

//指定webpack打包时要使用的模块

module：{

rules:[

//test指定的是规则生效的文件

test:/\.ts$/，

user：'ts-loader', //指定使用的loader

exclude：/node-modules/ //排除的文件

]

}，

mode:'development' //不加上这个可能会不能编译成功

}

//最后在package.json文件里的scripts里加上“build”：‘webpack’ 就可以npm run build

//配置webpack插件

plugins:{

// npm i -D html-webpack-plugin 加上这个插件后就可以自动在dist文件里生成html文件

new HTMLWebpackPlugin(options：{

template:'./src/index.html‘模板

})

},

resolve:{//用来设置引用模块

extensions:['ts','js']