1.配置文件
const path=require('path')
const {VueLoaderPlugin}=require('vue-loader')
const HtmlWebpackPlugin=require('html-webpack-plugin')
module.exports={
entry:'./src/app.js',
mode:'development',
devtool:'source-map',
output:{
path:path.join(__dirname,'/dist'),
filename:'[name].js',
clean:true
},
module:{
rules:[
//js
{
test: /\.m?js$/,
exclude: /node_modules/,
use: {
loader: "babel-loader",
options: {
presets: [['@babel/preset-env',{
"targets": {
"chrome": "58",
"ie": "11"
},
useBuiltIns:'usage',
corejs:3
}]]
}
}
},
//vue
{
test: /\.vue$/,
loader: 'vue-loader'
},
//css
{
test: /\.css$/i,
use: ["style-loader", "css-loader"],
},
//sass
{
test: /\.s[ac]ss$/i,
use: [
// 将 JS 字符串生成为 style 节点
'style-loader',
// 将 CSS 转化成 CommonJS 模块
'css-loader',
// 将 Sass 编译成 CSS
'sass-loader',
],
},
]
},
watchOptions:{
aggregateTimeout:1000,
poll:1000,
ignored:/node_modules/
},
devServer:{
historyApiFallback: true,
host:'127.0.0.1',
port:9000,
static:{
publicPath:path.join(__dirname,'/dist')
},
open:true,
},
plugins:[
new HtmlWebpackPlugin({
template:'./public/template.html',
name:'index.html'
}),
new VueLoaderPlugin()
]
}
2.pakage.json
{
"name": "mypro",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"dev":"npx webpack serve"
},
"keywords": [],
"author": "",
"license": "ISC",
"dependencies": {
"core-js": "^3.18.0",
"node-sass": "^6.0.1",
"vue": "^3.2.18",
"vue-loader": "^16.8.1",
"vue-router": "^4.0.11",
"vuex": "^4.0.2"
},
"devDependencies": {
"@babel/core": "^7.15.5",
"@babel/preset-env": "^7.15.6",
"@vue/compiler-sfc": "^3.2.18",
"babel-loader": "^8.2.2",
"css-loader": "^6.3.0",
"html-webpack-plugin": "^5.3.2",
"sass": "^1.42.1",
"sass-loader": "^12.1.0",
"style-loader": "^3.3.0",
"webpack": "^5.54.0",
"webpack-cli": "^4.8.0",
"webpack-dev-server": "^4.2.1"
}
}