前言
我是歌谣 最好的种树是十年前 其次是现在 今天继续给大家带来的是webpack案例的深入讲解
环境配置
npm init -y
yarn add vite -D
修改page.json配置端口
{
"name": "demo1",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"dev": "vite --port 3002"
},
"keywords": [],
"author": "",
"license": "ISC",
"devDependencies": {
"vite": "^4.4.9"
}
}
安装
yarn add webpack webpack-cli webpack-dev-server babel-loader@7 babel-core babel-preset-env babel-plugin-transform-runtime babel-plugin-transform-decorators babel-plugin-transform-decorators-legacy sass-loader node-sass css-loader style-loader ejs-loader html-webpack-plugin
webpack.config.js
const HtmlWebpackPlugin=require('html-webpack-plugin')
path=require("path")
module.exports = {
mode: 'development',
entry:{
index:path.resolve(__dirname,"./index.js")
},
output: {
path:path.resolve(__dirname+"/dist"),
filename:'js/[name].js'
},
module: {
rules: [{
test: /\.js$/,
loader: 'babel-loader',
exclude: path.resolve(__dirname,"node_modules"),
},
{
test: /\.css$/,
use: [
'style_loader',
'css_loader'
]
},
{
test: /\.scss$/,
use: [
'style_loader',
'css_loader',
'scss-loader'
]
},
{
test: /\.tpl$/,
loader:'ejs-loader'
}
]
},
plugins:[
new HtmlWebpackPlugin({
filename:'index.html',
template:path.resolve(__dirname,"./index.html"),
chunks:['index'],
excludeChunks:['node_modules']
})
],
devServer:{
open:true,
host:"localhost",
port:"3002"
}
}
运行结果
配置文件
{
"name": "demo",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"dev":"webpack-dev-server --config webpack.config.js",
"webpack":"webpack --config webpack.config.js"
},
"keywords": [],
"author": "",
"license": "ISC",
"dependencies": {
"babel-core": "^6.26.3",
"babel-loader": "7",
"babel-plugin-transform-decorators": "^6.24.1",
"babel-plugin-transform-decorators-legacy": "^1.3.5",
"babel-plugin-transform-runtime": "^6.23.0",
"babel-preset-env": "^1.7.0",
"css-loader": "^6.8.1",
"ejs-loader": "^0.5.0",
"html-webpack-plugin": "^5.5.3",
"node-sass": "^9.0.0",
"sass-loader": "^13.3.2",
"style-loader": "^3.3.3",
"webpack": "^5.89.0",
"webpack-cli": "^5.1.4",
"webpack-dev-server": "^4.15.1"
}
}