weabpack 项目模板&配置
项目目录 https://gitee.com/zhuyunjiandull/webpack_project
初始化
npm init -y安装工具包
npm i -D webpack webpack-cli typescript ts-loader
npm i -D html-webpack-plugin webpack-dev-server clean-webpack-plugin
npm i -D @babel/core @babel/preset-env babel-loader core-js
npm i -D less less-loader css-loader style-loader
- 创建文件6个基本的文件
package.json
{
"name": "webpack_project",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"build": "webpack",
"start": "webpack server --open --mode=development"
},
"keywords": [],
"author": "",
"license": "ISC",
"devDependencies": {
"@babel/core": "^7.18.9",
"@babel/preset-env": "^7.18.9",
"babel-loader": "^8.2.5",
"clean-webpack-plugin": "^4.0.0",
"core-js": "^3.23.5",
"html-webpack-plugin": "^5.5.0",
"ts-loader": "^9.3.1",
"typescript": "^4.7.4",
"webpack": "^5.73.0",
"webpack-cli": "^4.10.0",
"webpack-dev-server": "^4.9.3"
}
}
webpack.config.js
//引入一个包
const path = require('path');
//引入html 插件
const HtmlWebpackPlugin = require("html-webpack-plugin");
//引入clean插件
const { CleanWebpackPlugin } = require('clean-webpack-plugin');
//webpack 配置信息
module.exports = {
//指定入口文件
entry: "./src/index.ts",
//指定打包文件的目录
output: {
path:path.resolve(__dirname,'disk'),
//打包后的文件
filename:'bundle.js',
//兼容ie 告诉webpack 不适用箭头函数
environment:{
arrowFunction:false
}
},
//使用的模块
module :{
rules:[
{
//指定规则生效文件
test:/\.ts$/,
//要使用的load 从后向前执行
use:[
//配置babel
{
loader:"babel-loader",
options:{
presets:[
[
//指定插件环境
"@babel/preset-env",
{
targets:{
"chrome":"88",
"ie":"11"
},
//corejs 版本
"corejs":"3",
//按需加载
"useBuiltIns":"usage"
}
]
]
}
},
'ts-loader'
],
//要排除的文件
exclude:/node_modules/
},
//设置less 文件的处理
{
test:/\.less$/,
use:[
"style-loader",
"css-loader",
"less-loader"
]
}
]
},
//配置webpack 插件
plugins :[
new CleanWebpackPlugin(),
new HtmlWebpackPlugin({
template:'./src/index.html'
})
],
//设置引用模块
resolve:{
extensions:[".ts",".js"]
}
}
tsconfig.json
{
"compilerOptions": {
"module": "ES2015",
"target": "ES2015",
"strict": true,
"noEmitOnError": true
}
}
src/index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div>这是一个templatediv</div>
</body>
</html>
src/index.ts
//引入样式才会生效
import './style/index.less';
console.log('hello');
src/style/index.less
body {
background-color: red;
}
配置完成测试
npm run build 打包
npm run start 运行到浏览器
