Столкнулся вот с такой проблемой, не знаю как решить, в интернете тоже найти ничего не могу, начал с нуля изучать Webpack. Пытаюсь с gulp на webpack перенести первый, маленький проект для портфолио.
$ npm run build
> project__gulp@1.0.0 build C:\localserver\OSPanel\domains
\project__gulp
> webpack --mode production
(node:5048) DeprecationWarning: Tapable.plugin is deprecat
ed. Use new API on `.hooks` instead
(node:5048) DeprecationWarning: Chunk.mapModules: Use Arra
y.from(chunk.modulesIterable, fn) instead
Hash: 76b480f5e9577598b50b
Version: webpack 4.25.1
Time: 3536ms
Built at: 2018-11-09 13:29:59
3 assets
Entrypoint main = style.64d6974be4e0a0739cf3.css main.4f8c
417cba5542e22182.js
[0] ./src/index.js 43 bytes {0} [built]
[1] ./src/scss/main.scss 1.36 KiB {0} [built]
[2] ./node_modules/mini-css-extract-plugin/dist/loader.js!
./node_modules/css-loader!./node_modules/sass-loader/lib/l
oader.js!./src/scss/main.scss 39 bytes {0} [built]
+ 4 hidden modules
ERROR in Error: Child compilation failed:
Module build failed (from ./node_modules/html-webpack-pl
ugin/lib/loader.js):
SyntaxError: Invalid or unexpected token
- Function
- lodash.js:4605 Function.template
[project__gulp]/[lodash]/dist/lodash.js:4605:20
- SyntaxError: Invalid or unexpected token
- compiler.js:79 childCompiler.runAsChild
[project__gulp]/[html-webpack-plugin]/lib/compiler.js:
79:16
- Compiler.js:296 compile
[project__gulp]/[webpack]/lib/Compiler.js:296:11
- Compiler.js:552 hooks.afterCompile.callAsync.err
[project__gulp]/[webpack]/lib/Compiler.js:552:14
- Hook.js:154 AsyncSeriesHook.lazyCompileHook
[project__gulp]/[tapable]/lib/Hook.js:154:20
- Compiler.js:549 compilation.seal.err
[project__gulp]/[webpack]/lib/Compiler.js:549:30
[project__gulp]/[webpack]/lib/Compilation.js:1314:32
- index.js:287
[project__gulp]/[uglifyjs-webpack-plugin]/dist/index.j
s:287:11
- Runner.js:67 Runner.runTasks
[project__gulp]/[uglifyjs-webpack-plugin]/dist/uglify/
Runner.js:67:9
- index.js:198 UglifyJsPlugin.optimizeFn
[project__gulp]/[uglifyjs-webpack-plugin]/dist/index.j
s:198:16
Child html-webpack-plugin for "index.html":
1 asset
Entrypoint undefined = index.html
[0] ./node_modules/html-webpack-plugin/lib/loader.js!.
/src/index.html 431 bytes {0} [built] [failed] [1 error]
ERROR in ./src/index.html (./node_modules/html-webpack
-plugin/lib/loader.js!./src/index.html)
SyntaxError: Invalid or unexpected token
at Function (<anonymous>)
at Function.template (C:\localserver\OSPanel\domai
ns\project__gulp\node_modules\lodash\dist\lodash.js:4605:2
0)
at Object.module.exports (C:\localserver\OSPanel\d
omains\project__gulp\node_modules\html-webpack-plugin\lib\
loader.js:28:22)
Child mini-css-extract-plugin node_modules/css-loader/inde
x.js!node_modules/sass-loader/lib/loader.js!src/scss/main.
scss:
Entrypoint mini-css-extract-plugin = *
[0] ./node_modules/css-loader!./node_modules/sass-load
er/lib/loader.js!./src/scss/main.scss 51.9 KiB {0} [built]
[3] ./src/images/header__bkg.png 2.32 MiB {0} [built]
+ 2 hidden modules
npm ERR! code ELIFECYCLE
npm ERR! errno 2
npm ERR! project__gulp@1.0.0 build: `webpack --mode produc
tion`
npm ERR! Exit status 2
npm ERR!
npm ERR! Failed at the project__gulp@1.0.0 build script.
npm ERR! This is probably not a problem with npm. There is
likely additional logging output above.
npm ERR! A complete log of this run can be found in:
npm ERR! C:\Users\alex2\AppData\Roaming\npm-cache\_log
s\2018-11-09T10_29_59_849Z-debug.log
Вот webpack.config.js:// basick vars
const HtmlWebpackPlugin = require('html-webpack-plugin');
const path = require('path');
const webpack = require('webpack');
const ExtractTextPlugin = require('extract-text-webpack-plugin');
const WebpackMd5Hash = require('webpack-md5-hash');
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
//module setting
let conf = {
entry: './src/index.js',
output: {
filename: '[name].[chunkhash].js',
path: path.resolve(__dirname, './dist'),
publicPath: '/dist'
},
devServer: {
overlay: true
},
module: {
rules: [
{
test: /\.js$/,
exclude: '/node_modules/',
use: {
loader: 'babel-loader',
}
},
{
test: /\.scss$/,
use: ['style-loader', MiniCssExtractPlugin.loader, 'css-loader', 'sass-loader' ]
},
{
test: /\.(jpg|png|gif)$/,
include: /images/,
loader: 'url-loader'
}
]
},
plugins: [
new MiniCssExtractPlugin({
filename: 'style.[contenthash].css'
}),
new HtmlWebpackPlugin({
inject: false,
hash: true,
template: './src/index.html',
filename: 'index.html'
}),
new WebpackMd5Hash(),
]
};
module.exports = conf;
Вот package.json:{
"name": "project__gulp",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"build": "webpack --mode production",
"dev": "webpack-dev-server --mode development --open"
},
"repository": {
"type": "git",
"url": "git+https://github.com/LehaRybkoha/GitRepository.git"
},
"author": "",
"license": "ISC",
"bugs": {
"url": "https://github.com/LehaRybkoha/GitRepository/issues"
},
"homepage": "https://github.com/LehaRybkoha/GitRepository#readme",
"devDependencies": {
"autoprefixer": "^9.3.1",
"babel-core": "^6.26.3",
"babel-loader": "^7.1.5",
"babel-preset-env": "^1.7.0",
"babel-preset-stage-3": "^6.24.1",
"browser-sync": "^2.24.7",
"clean-webpack-plugin": "^0.1.19",
"css-loader": "^1.0.1",
"extract-text-webpack-plugin": "^4.0.0-beta.0",
"gulp": "^3.9.1",
"gulp-cache": "^1.0.2",
"gulp-clean-css": "^3.10.0",
"gulp-if": "^2.0.2",
"gulp-sass": "^4.0.1",
"gulp-uglify": "^3.0.1",
"gulp-useref": "^3.1.5",
"html-webpack-plugin": "^3.2.0",
"jshint-loader": "^0.8.4",
"mini-css-extract-plugin": "^0.4.4",
"node-sass": "^4.10.0",
"node-static": "^0.7.11",
"path": "^0.12.7",
"postcss-loader": "^3.0.0",
"run-sequence": "^2.2.1",
"sass-loader": "^7.1.0",
"scss-loader": "0.0.1",
"style-loader": "^0.23.1",
"url-loader": "^1.1.2",
"webpack": "^4.25.1",
"webpack-cli": "^3.1.2",
"webpack-dev-server": "^3.1.10",
"webpack-md5-hash": "0.0.6"
},
"dependencies": {
"gulp-minify-css": "^1.2.4",
"jquery": "^3.3.1",
"owl.carousel": "^2.3.4"
}
}
Вот линки и скрипты index.html(весь index не вместится):<!DOCTYPE html>
<!--[if lt IE 7]> <html class="lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]> <html class="lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]> <html class="lt-ie9"> <![endif]-->
<!--[if gt IE 8]><!--> <html> <!--<![endif]-->
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge, chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Web-site</title>
<link rel="stylesheet" href="<%=htmlWebpackPlugin.files.chunks.main.css %">
<link href="https://fonts.googleapis.com/css?family=Montserrat:400,600,700,800,900&subset=cyrillic" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Roboto+Slab&subset=cyrillic" rel="stylesheet">
</head>
<script src="<%= htmlWebpackPlugin.files.chunks.main.entry %>"></script>
</body>
</html>
И в index.js прописан путь до scss файла
Простой
