浅学webpack[0]
webpack.config.js文件
const path = require('path') // NODE 自带的API
module.exports = {
mode:"development", // 当前环境 test production development
entry:'./src/main.js', // 入口文件
output:{ // 出口文件
path: path.join(__dirname,'dist'), // __dirname 根目录 dist
filename:'bundle.js'
},
devtool:"source-map", // 打开你的资源图 方便在线调试 (缺点 容易被别人偷代码 上线一定要关闭)
// 模块定义打包规则
module:{
rules:[
{
test:/\.css$/,
use:['style-loader','css-loader'],
},
{
test:/\.(sass|scss)$/,
use:['style-loader','css-loader','sass-loader']
},
{
test:/\.less$/,
use:['style-loader','css-loader','less-loader']
},
{
test:/\.js$/,
// include
exclude:/node_modules/,
use:['babel-loader']
}
]
}
}
package.json文件
{
"name": "webpackdemo",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"build": "rimraf dist && webpack",
"start": "webpack-dev-server --hot --open"
},
"keywords": [],
"author": "",
"license": "ISC",
"devDependencies": {
"babel-core": "^6.26.3",
"babel-loader": "^7.1.5",
"babel-preset-env": "^1.7.0",
"css-loader": "^6.7.2",
"forever": "^4.0.3",
"gulp": "^4.0.2",
"less": "^4.1.3",
"less-loader": "^11.1.0",
"nodemon": "^2.0.20",
"pm2": "^5.2.2",
"sass": "^1.56.2",
"sass-loader": "^13.2.0",
"source-map": "^0.7.4",
"style-loader": "^3.3.1",
"webpack": "^5.75.0",
"webpack-cli": "^5.0.1",
"webpack-dev-server": "^4.11.1"
},
"dependencies": {
"moment": "^2.29.4",
"react": "^18.2.0",
"vue": "^2.7.14"
}
}