Я могу скинуть вам полноценную настройку webpack , чтобы вы долго не мучились и смогли быстро начать свою разрабутку приложения
/**** package.json ****/
В свойстве devDependencies находятся список установленных пакетов .
npm i -D yourPack
{
"name": "yourProject",
"version": "1.0.0",
"description": "",
"main": "webpack.config.js",
"scripts": {
"dev": "webpack serve --mode development",
"build": "webpack serve --mode production",
"watch": "webpack serve --mode development --watch"
},
"author": "",
"license": "ISC",
"devDependencies": {
"css-loader": "^5.2.5",
"file-loader": "^6.2.0",
"html-webpack-plugin": "^5.3.1",
"node-sass": "^6.0.0",
"sass-loader": "^11.1.1",
"style-loader": "^2.0.0",
"url-loader": "^4.1.1",
"vue": "^2.6.12",
"vue-loader": "^15.9.7",
"vue-loader-plugin": "^1.3.0",
"vue-template-compiler": "^2.6.12",
"webpack": "^5.37.1",
"webpack-cli": "^4.7.0",
"webpack-dev-server": "^3.11.2"
}
}
/**** webpack.config.js ****/
const path = require('path');
const HTMLWebpackPlugin = require('html-webpack-plugin');
const {VueLoaderPlugin} = require('vue-loader');
module.exports = {
mode:'development',
devtool: false,
performance: {
maxEntrypointSize: 512000,
maxAssetSize: 512000
},
entry: ["./src/index.js","./src/assets/js/main.js"],
output: {
filename: '[name].bundle.js',
path: path.resolve(__dirname, 'dist'),
},
plugins: [
new HTMLWebpackPlugin({template: "./src/index.html"}),
new VueLoaderPlugin(),
],
resolve: {
extensions:['.js','.scss','.vue', '.svg', '.png', '.jpg','...'],
alias: {
vue: 'vue/dist/vue.js'
},
},
module: {
rules: [
{
test:/\.vue$/,
use: ['vue-loader']
},
{
test: /\.scss$/,
use: ['vue-style-loader','style-loader','css-loader','sass-loader'],
},
{
test: /\.(jpe?g|png|gif|svg)$/i,
use: [{
loader:'url-loader',
options: {
name: '[name].[ext]',
outPath: './src/assets/imgs',
publicPath: './src/assets/imgs',
emitFile: true,
esModule: false,
}
}]
},
{
test: /\.(ttf|woff|woff2|eot)/,
use: ['file-loader'],
},
]
}
}