我强调试图让Uglify与我的项目合作,以前我使用过Uglify并没有给出问题,但现在我觉得这与SASS有关.
ERROR in ./~/css-loader!./~/sass-loader!./app/scss/global-header.scss
Module build failed: TypeError: Cannot read property '4' of undefined
at reduce (/Users/contractor/centralefcom-global-components/node_modules/postcss-reduce-transforms/dist/index.js:121:23)
at walk (/Users/contractor/centralefcom-global-components/node_modules/postcss-value-parser/lib/walk.js:7:22)
at ValueParser.walk (/Users/contractor/centralefcom-global-components/node_modules/postcss-value-parser/lib/index.js:18:5)
at /Users/contractor/centralefcom-global-components/node_modules/postcss-reduce-transforms/dist/index.js:131:75
at /Users/contractor/centralefcom-global-components/node_modules/postcss/lib/container.js:92:28
at /Users/contractor/centralefcom-global-components/node_modules/postcss/lib/container.js:73:26
...
...
此错误重复多次,每个多个包一个.
这是我的webpack配置.
var webpack = require('webpack')
var HtmlWebpackPlugin = require('html-webpack-plugin');
var ExtractTextPlugin = require('extract-text-webpack-plugin');
var path = require('path');
module.exports = {
context: __dirname,
resolve: {
modulesDirectories: ['node_modules', 'bower_components']
},
entry: {
'all': [
'./app/global-all.js',
'./app/scss/global-all.scss'
],
'footer': [
'./app/global-footer.js',
'./app/scss/global-footer.scss'
],
'header': [
'./app/global-header.js',
'./app/scss/global-header.scss'
],
'footer.nodeps': [
'./app/global-footer-nodeps.js', …javascript uglifyjs webpack webpack-style-loader html-webpack-plugin
我试图将标题传递给 html-webpack-plugin，但它根本不创建标题标签:(
有人可以告诉我问题出在哪里吗
webpack.js
var HtmlWebpackPlugin = require('html-webpack-plugin');
var webpack = require('webpack');
module.exports = {
entry: ['./src/app/main.ts'],
output: {
filename: 'build.js',
path: 'dist'
},
resolve: {
root: __dirname,
extensions: ['', '.ts', '.js', '.json']
},
resolveLoader: {
modulesDirectories: ["node_modules"]
},
devtool: "source-map",
plugins: [
new HtmlWebpackPlugin({
title : 'Hello',
template: './src/index.html',
inject: 'body',
hash: true,
})
],
module: {
loaders: loaders
}
};
这是index.html
<!doctype html>
<html lang="en">
<head>
<noscript>
<meta http-equiv="refresh" content="0; url=https://en.wikipedia.org/wiki/JavaScript">
</noscript>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta …我尝试按照此链接使用 webpack 4 创建一个基本的 React 应用程序
在安装“html-webpack-plugin”之前，我没有遇到任何错误。但是，一旦我运行命令“npm run start”，我就会不断收到以下错误：
**Error: Cannot find module 'html-webpack-plugin'
at Function.Module._resolveFilename (module.js:547:15)
at Function.Module._load (module.js:474:25)
at Module.require (module.js:596:17)**
我尝试通过在全局和本地安装软件包来使用以下两个线程解决此问题，但没有帮助。
https://github.com/webpack/webpack-dev-server/issues/1330
请看我下面的代码：
包.json：
{
"name": "react_website",
"version": "1.0.0",
"description": "Website using React and Webpack",
"main": "index.js",
"scripts": {
"start": "webpack --mode development",
"build": "webpack --mode production"
},
"author": "",
"license": "ISC",
"devDependencies": {
"babel-core": "^6.26.3",
"babel-loader": "^7.1.5",
"babel-preset-env": "^1.7.0",
"babel-preset-react": "^6.24.1",
"html-webpack-plugin": "^3.2.0",
"webpack": "^4.16.2",
"webpack-cli": "^2.1.5"
},
"dependencies": {
"react": "^16.4.1", …我正在尝试使用将库从文件夹复制node_modules到文件夹，库名称是disthtml-webpack-pluginwsrpc-python
这是我的 webpack 配置，我设置了file-loader但没有帮助。
'use strict'
const path = require('path')
const utils = require('./utils')
const config = require('../config')
const { VueLoaderPlugin } = require('vue-loader')
const vueLoaderConfig = require('./vue-loader.conf')
function resolve(dir) {
return path.join(__dirname, '..', dir)
}
const createLintingRule = () => ({
test: /\.(js|vue)$/,
loader: 'eslint-loader',
enforce: 'pre',
include: [resolve('src'), resolve('test')],
options: {
formatter: require('eslint-friendly-formatter'),
emitWarning: !config.dev.showEslintErrorsInOverlay
}
})
module.exports = {
context: path.resolve(__dirname, '../'),
entry: {
app: './src/main.js',
},
output: {
path: …我的webpack配置有问题.实现html-webpack-plugin后我得到一个错误,生成了整个错误堆栈index.html.
错误堆栈:Html Webpack插件:
Error: Child compilation failed: Conflict: Multiple assets emit to the same filename index.html: Error: Conflict: Multiple assets emit to the same filename index.html
compiler.js:76 [Pre-build]/[html-webpack-plugin]/lib/compiler.js:76:16
Compiler.js:291 Compiler. [Pre-build]/[webpack]/lib/Compiler.js:291:10
Compiler.js:494 [Pre-build]/[webpack]/lib/Compiler.js:494:13
Tapable.js:138 next [Pre-build]/[tapable]/lib/Tapable.js:138:11
CachePlugin.js:62 Compiler. [Pre-build]/[webpack]/lib/CachePlugin.js:62:5
Tapable.js:142 Compiler.applyPluginsAsyncSeries [Pre-build]/[tapable]/lib/Tapable.js:142:13
Compiler.js:491 [Pre-build]/[webpack]/lib/Compiler.js:491:10
Tapable.js:131 Compilation.applyPluginsAsyncSeries [Pre-build]/[tapable]/lib/Tapable.js:131:46
Compilation.js:645 self.applyPluginsAsync.err [Pre-build]/[webpack]/lib/Compilation.js:645:19
Tapable.js:131 Compilation.applyPluginsAsyncSeries [Pre-build]/[tapable]/lib/Tapable.js:131:46
Compilation.js:636 self.applyPluginsAsync.err [Pre-build]/[webpack]/lib/Compilation.js:636:11
Tapable.js:131 Compilation.applyPluginsAsyncSeries [Pre-build]/[tapable]/lib/Tapable.js:131:46
Compilation.js:631 self.applyPluginsAsync.err [Pre-build]/[webpack]/lib/Compilation.js:631:10
Tapable.js:131 Compilation.applyPluginsAsyncSeries [Pre-build]/[tapable]/lib/Tapable.js:131:46
Compilation.js:627 sealPart2 [Pre-build]/[webpack]/lib/Compilation.js:627:9
Tapable.js:131 Compilation.applyPluginsAsyncSeries [Pre-build]/[tapable]/lib/Tapable.js:131:46
Compilation.js:575 Compilation.seal [Pre-build]/[webpack]/lib/Compilation.js:575:8
Compiler.js:488 [Pre-build]/[webpack]/lib/Compiler.js:488:16
Tapable.js:225 [Pre-build]/[tapable]/lib/Tapable.js:225:11 …
我有一个 React 应用程序，目前正在将应用程序从 迁移CRA到vite. 我已经使用 .php 配置了 index.php （其中有一些 php 配置）作为入口点HtmlWebpackPlugin。因此，在迁移到 时vite，它以index.html 作为入口点。有什么办法可以将其更改为index.php吗？参考链接
我正在尝试设置webpack4和React样板,但面临问题渲染index.html.例如,当我更新index.html的标题并且未更新/ dist文件夹中的index.html时,只渲染title而index.js中没有任何内容呈现.请帮助我看一下项目中的以下细节.
的package.json
{
"name": "react-webpack-boilerplate",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"start": "webpack-dev-server --mode development --open --hot",
"build": "webpack --mode production"
},
"keywords": [],
"author": "",
"license": "ISC",
"devDependencies": {
"babel-core": "^6.26.3",
"babel-loader": "^7.1.4",
"babel-preset-env": "^1.7.0",
"babel-preset-react": "^6.24.1",
"css-loader": "^0.28.11",
"html-loader": "^0.5.5",
"html-webpack-plugin": "^3.2.0",
"redux-immutable-state-invariant": "1.2.3",
"style-loader": "^0.21.0",
"webpack": "^4.6.0",
"webpack-cli": "^2.0.15",
"webpack-dev-server": "^3.1.4"
},
"dependencies": {
"bootstrap": "^4.1.1",
"react": "^16.3.2",
"react-bootstrap": "^0.32.1",
"react-dom": "^16.3.2",
"react-redux": "^5.0.7",
"react-router": …我安装使用Vue.js的CLI为发现这里：
# install vue-cli
$ npm install --global vue-cli
# create a new project using the "webpack" template
$ vue init webpack my-project
# install dependencies and go!
$ cd my-project
$ npm install
$ npm run dev
当我运行它时会打开 Safari，这是我的默认浏览器。我想在不更改操作系统默认浏览器的情况下指定 Chrome（仅用于开发）。
webpack.dev.conf.js 如下：
var utils = require('./utils')
var webpack = require('webpack')
var config = require('../config')
var merge = require('webpack-merge')
var baseWebpackConfig = require('./webpack.base.conf')
var HtmlWebpackPlugin = require('html-webpack-plugin')
var FriendlyErrorsPlugin = require('friendly-errors-webpack-plugin')
// add hot-reload related code to entry …根据我对内容安全策略的理解,现时必须根据每个请求进行更改.这意味着(我认为)它必须在运行时在客户端生成,而不是在Webpack配置的构建时生成.我在我的应用程序中测试了webpack_nonce功能,它运行良好.
不幸的是,我不确定如何将在客户端上运行时生成的值转换为实际的CSP策略,该策略可以设置为index.html文件(或某些等效文件)中的元标记,也可以设置为服务器本身.
我想你可以在客户端上动态设置CSP元标记,但这似乎是一种安全风险.我已经尝试了csp-webpack-plugin,它在构建时计算文件的哈希值,然后将它们添加到index.html.这个过程对我来说很有意义,它只是不支持我们的用例.
我只是觉得我错过了使用webpack_nonce的东西.
问题是，当我使用HtmlWebpackPlugin和splitChunks时，无法将块注入到生成的html中。我对Webpack 4的配置是
var loading = {
ejs: fs.readFileSync(path.resolve(__dirname, 'template/loading.ejs')),
css: fs.readFileSync(path.resolve(__dirname, 'template/loading.css')),
};
module.exports = {
entry: './main.js',
output: {
path: path.resolve(__dirname, 'dist'),
filename: 'main.[hash].js',
chunkFilename: '[name].[chunkhash].js',
},
mode: 'production',
// ...
module: {
rules: [
{
test: /\.(js|jsx)$/,
include: path.resolve(__dirname, 'src'),
exclude: path.resolve(__dirname, 'node_modules'),
use: 'happypack/loader?id=babel',
},
],
},
plugins: [
new CleanWebpackPlugin(['dist']),
new HappyPack({
id: 'babel',
loaders: ['babel-loader?cacheDirectory'],
}),
new HtmlWebpackPlugin({
template: path.resolve(__dirname, 'template/index.ejs'),
loading: loading,
}),
new ScriptExtHtmlWebpackPlugin({
defaultAttribute: 'defer',
}),
],
optimization: {
splitChunks: {
chunks: …