@Leh_ryb

Вылезают ошибки в npm, как их исправить?

Столкнулся вот с такой проблемой, не знаю как решить, в интернете тоже найти ничего не могу, начал с нуля изучать 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&amp;subset=cyrillic" rel="stylesheet">

	<link href="https://fonts.googleapis.com/css?family=Roboto+Slab&amp;subset=cyrillic" rel="stylesheet">
</head>

<script src="<%= htmlWebpackPlugin.files.chunks.main.entry %>"></script>
</body>
</html>


И в index.js прописан путь до scss файла
  • Вопрос задан
  • 1610 просмотров
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы