Результат / Шаблон

Результат / Шаблон

На данный момент у нас должны быть:

package.json

{"name": "webpack-project", "version": "1.0.0", "description": "", "main": "index.js", "scripts": {"dev": "webpack — -mode = development "," watch ":" npm run dev — -w "," build ":" webpack —mode = production "}," author ":" "," license ":" ISC "," devDependencies ": {" @ babel / core ":" ^ 7.3.4 "," @ babel / preset-env ":" ^ 7.3.4 "," babel-loader ":" ^ 8.0.5 "," browser- sync ":" ^ 2.26.3 "," browser-sync-webpack-plugin ":" ^ 2.2.2 "," css-loader ":" ^ 2.1.0 "," mini-css-extract-plugin ":" ^ 0.5.0 "," node-sass ":" ^ 4.11.0 "," path ":" ^ 0.12.7 "," sass-loader ":" ^ 7.1.0 "," uglifyjs-webpack-plugin " : "^ 2.1.2", "webpack": "^ 4.29.6", "webpack-cli": "^ 3.2.3"}}

Читать также:  Объявления стилей CSS

webpack.config.js

const path = require (‘путь’); const MiniCssExtractPlugin = require ("mini-css-extract-plugin"); const UglifyJsPlugin = require (‘uglifyjs-webpack-plugin’); const BrowserSyncPlugin = require (‘browser-sync-webpack-plugin’);
module.exports = {запись: [path.resolve (‘./ src / js / functions.js’), path.resolve (‘./ src / scss / style.scss’)], вывод: {путь: путь. resol (__ dirname, ‘dist’), filename: ‘functions.bundle.js’}, module: {rules: [{exclude: / node_modules /, test: /\.js$/, loader: ‘babel-loader’) , параметры: {presets: [‘@ babel / preset-env’], compact: true}}, {exclude: / node_modules /, test: /\.scss$/, используйте: [{loader: MiniCssExtractPlugin.loader}, {loader: ‘css-loader’}, {loader: ‘sass-loader’}]}]}, плагины: [новый MiniCssExtractPlugin ({filename: ‘style.bundle.css’}), новый BrowserSyncPlugin ({host: ‘ localhost ‘, server: {baseDir: [‘. ‘]}})], оптимизация: {minimizer: [new UglifyJsPlugin ({test: /\.js$/})]}};

Понравилась статья? Поделиться с друзьями:
Что нужно знать пользователю?