标签: webpack-4

有没有办法用webpack 4将scss文件构建到css中

我只是在试用Webpack 4,我想知道它是否有内置的方法来管理Scss文件,因为ExtractTextPlugin不起作用.

javascript sass webpack-4

Pie*_*ith

lucky-day

1
推荐指数

1
解决办法

1845
查看次数

无法在 webpack 4 中加载 css 文件

给出以下 webpack 4 配置：

const path = require('path')
const webpack = require('webpack')
const MiniCssExtractPlugin = require("mini-css-extract-plugin")
const devMode = process.env.NODE_ENV !== 'production'
const devFlagPlugin = new webpack.DefinePlugin({
  __DEV__: JSON.stringify(JSON.parse(process.env.DEBUG || 'false'))
})

module.exports = {
    mode: "development",
    entry: [
        'webpack-dev-server/client?http://0.0.0.0:3000',
        'webpack/hot/only-dev-server',
        "./app/app.js"
    ],
    output: {
        path: path.join(__dirname, "build"),
        filename: "bundle.js"
    },
    devtool: 'eval-source-map',
    resolve: {
        extensions: ['.js', '.jsx']
    },
    module: {
        rules: [
            { 
                test: /\.jsx|\.js?$/, 
                loader: 'babel-loader',
                options: {
                    plugins: [
                        'react-hot-loader/babel'
                    ]
                },
                exclude: /node_modules/},
            {
                test: /\.jsx|\.js$/, …

Run Code Online (Sandbox Code Playgroud)

css webpack css-loader webpack-4

jam*_*123

lucky-day

1
推荐指数

1
解决办法

6460
查看次数

Webpack js 包已加载但未执行

我有三个 webpack 配置文件。一种用于生产，一种用于开发，一种用于通用配置。当我运行 dev config 时，js 文件被加载，我可以在浏览器开发工具中看到它，但它没有被执行。如果我运行生产配置，一切正常。

我使用：节点 v10.3.0、纱线 v1.7.0、webpack 4.19.1、webpack cli 3.1.0

webpack.common.js 这里是我的条目我的输出和我的加载器：

const path = require("path");
const MiniCssExtractPlugin = require('mini-css-extract-plugin');

module.exports = {
    entry: {
        app: ['./src/javascript/entry.js', './src/scss/main.scss', './src/images/entryImages.js'],
    },
    output: {
        filename: "javascript/[name].js",
        path: path.resolve(__dirname, "./dist"),
    },
    module: {
        rules: [
            {
                test: /\.(scss|css)$/,
                use: [
                    {
                        loader: 'style-loader'
                    },
                    {
                        loader: MiniCssExtractPlugin.loader
                    },
                    {
                        loader: 'css-loader',
                        options: {
                            sourceMap: true
                        }
                    },
                    {
                        loader: 'postcss-loader',
                        options: {
                            ident: 'postcss',
                            sourceMap: true,
                            plugins: [
                                require('autoprefixer')({'browsers': ['> …

Run Code Online (Sandbox Code Playgroud)

webpack webpack-4

Gre*_*808

lucky-day

1
推荐指数

1
解决办法

2739
查看次数

HtmlWebpackPlugin - 在 body 的特定位置注入 js

我正在使用 HtmlWebpackPlugin 将 javascript 注入到我的模板文件中：

<html>
    ...
    <body>
        ...
        <?php echo $this->inlineScript(); ?>
        <script type="text/javascript" src="/dist/vendor.js?a4212b4b10c2d4d2d73e"></script>
    </body>
</html>

Run Code Online (Sandbox Code Playgroud)

但是，我需要在 PHP 代码之前注入生成的包<?php echo $this->inlineScript(); ?>，以使内联脚本正常工作（它们需要 JQuery，它将在 vendor.js 中加载）。

结果应该是：

<html>
    ...
    <body>
        ...
        <script type="text/javascript" src="/dist/vendor.js?a4212b4b10c2d4d2d73e"></script>
        <?php echo $this->inlineScript(); ?>
    </body>
</html>

Run Code Online (Sandbox Code Playgroud)

有没有办法实现这一目标？也许可以使用占位符之类的<%= htmlWebpackPlugin.options.??? %>或类似的东西？如果它不能与 HtmlWebpackPlugin 一起使用，我可以使用另一个 webpack 插件吗？

javascript asset-management webpack html-webpack-plugin webpack-4

kos*_*mak

2019 03-11

1
推荐指数

1
解决办法

7344
查看次数

Webpack 没有将所有函数捆绑在我的 JS 文件中

我最近将 Webpack 集成到我的项目中，为我网站上的 JS 文件构建捆绑包。修复了一些小问题后，我能够构建捆绑包。在浏览器中检查后，其中一个 Javascript 代码引发了以下错误。

经过检查，我意识到 addComment.moveform 导致了问题。

因此，我检查了生成的包，发现变量 addComment 的定义尚未推送到包中。如下编写的 Javascript 是否有原因不会被捆绑？Webpack 没有抛出错误吗？

 /**
 * 'Comment Reply' to each comment.
 * This script moves the Add Comment section to the position below the appropriate comment.
 * Modified from Wordpress https://core.svn.wordpress.org/trunk/wp-includes/js/comment-reply.js
 * Released under the GNU General Public License - https://wordpress.org/about/gpl/
 */
var addComment = {
  moveForm: function(commId, parentId, respondId, postId) {
    var div,
      element,
      style,
      cssHidden,
      t = this,
      comm = t.I(commId),
      respond = t.I(respondId),
      cancel = …

Run Code Online (Sandbox Code Playgroud)

javascript webpack webpack-4

Ami*_*avi

2019 04-18

1
推荐指数

1
解决办法

659
查看次数

如何解决运行构建时的错误 jest-worker？

我在 webpack 中运行构建生产时遇到问题。但是当我使用 dev-server 运行时，更多的代码不会出错。请帮忙..我必须完成我的最后一个项目，它必须在生产模式下运行良好。我希望我能从你们那里得到解决方案。

这是我在运行构建时的错误：

    /MovieDB/node_modules/jest-worker/build/WorkerPool.js:25
      } catch {
              ^

    SyntaxError: Unexpected token {
        at NativeCompileCache._moduleCompile (/home/donquixote/Desktop/dicoding-submission/MovieDB/node_modules/v8-compile-cache/v8-compile-cache.js:240:18)
        at Module._compile (/home/donquixote/Desktop/dicoding-submission/MovieDB/node_modules/v8-compile-cache/v8-compile-cache.js:186:36)
        at Object.Module._extensions..js (module.js:663:10)
        at Module.load (module.js:565:32)
  ...
        at Object.Module._extensions..js (module.js:663:10)
        at Module.load (module.js:565:32)
        at tryModuleLoad (module.js:505:12)
        at Function.Module._load (module.js:497:3)
    error Command failed with exit code 1.
    info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.

Run Code Online (Sandbox Code Playgroud)

这是我的 webpack.common.js：

const path = require('path');
const webpack = require('webpack');
const HtmlPackPlugin = require('html-webpack-plugin');
const terserPlugin = require('terser-webpack-plugin');

module.exports = {
  entry: './src/index.js',
  output: { …

Run Code Online (Sandbox Code Playgroud)

build webpack webpack-dev-server webpack-4

ima*_*uzi

lucky-day

1
推荐指数

2
解决办法

3020
查看次数

UglifyJS 和 webpack v5

我们一直在使用 UglifyJS 和 webpack v4 作为我们的 React 代码，但后来才更新到 webpack v5。UglifyJS 似乎不适用于 webpack v5。有替代方案吗？我们需要一些可以与 babel-loader 配合使用的东西。

谢谢

uglifyjs webpack webpack-4 terser

vgo*_*ani

lucky-day

1
推荐指数

2
解决办法

3921
查看次数

react-router-dom BrowserRouter无法导航到具有多个url参数的路径

我有一个问题,我无法导航到路径大于1节的路由,如此使用react-router-dom@4.2.2:此外,这是我有这个问题的回购的Github链接.

https://github.com/ShawnCholeva/React-Typescript-Webpack4-Router

import React, { Component } from 'react';
import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';
//All routes work if I use HashRouter here instead of BrowserRouter

class App extends Component {
    render() {
        return (
            <Router>
                <Switch>
                    <Route exact path='/' component={ Login }/> <--- Works
                    <Route exact path='/accountSetup/:guid?' component={ AccountSetup }/> 
                    ^-- Above works when just '/accountSetup' but fails when I do '/accountSetup/123'
                    <Route component={ NotFound } /> <--- Works
                </Switch>
            </Router>
        );
    } …

Run Code Online (Sandbox Code Playgroud)

reactjs webpack webpack-dev-server react-router-dom webpack-4

Sha*_*awn

2018 10-12

0
推荐指数

1
解决办法

1435
查看次数

如何缩小Lit-HTML(包括评论)

我决定通过以下方式试用lit-html:

npm install lit-html --save

Run Code Online (Sandbox Code Playgroud)

我听过很多次(来自不同的来源)lit-html的大小只有2或3KB,但是只通过导入html和渲染导出它导致我的webpack增长超过13KB.这比预期的要大得多.

此外,最终的dist包中嵌入了7次:

/**
 * @license
 * Copyright (c) 2017 The Polymer Project Authors. All rights reserved.
 * This code may only be used under the BSD style license found at
 * http://polymer.github.io/LICENSE.txt
 * The complete set of authors may be found at
 * http://polymer.github.io/AUTHORS.txt
 * The complete set of contributors may be found at
 * http://polymer.github.io/CONTRIBUTORS.txt
 * Code distributed by Google as part of the polymer project is also
 * subject …

Run Code Online (Sandbox Code Playgroud)

javascript typescript hyperhtml webpack-4 lit-html

Lon*_*est

2018 11-26

0
推荐指数

1
解决办法

695
查看次数

如何创建多输出文件？

我想将我的 chrome 扩展与 Webpack 捆绑在一起。源包含多个条目，webpack.config.js外观内容如下：

const path = require("path");

module.exports = {
  entry: {
    actions: './src/actions/index.js',
    options: './src/options/index.js'
  },
  output: {
    filename: '[name].js',
    path: path.resolve(__dirname, "dist")
  }
};

Run Code Online (Sandbox Code Playgroud)

和文件夹结构：

在actions/index.js和options/index.js文件条目。我的目标是，当src捆绑后dist文件夹应如下所示：

如何配置 webpack config 以获得上面所需的文件夹结构？

谢谢

javascript webpack webpack-4

zer*_*ing

2020 06-20

0
推荐指数

1
解决办法

1794
查看次数

“compilation”参数必须是 Office 加载项中编译错误的实例

我是 Office 插件开发的新手，但在我们的组织中有一个项目。安装 package.json 文件中提到的所有依赖项后，当我尝试运行“npm run dev-server”时，出现以下错误：

c:\\git\\sample-project\\ui-addin>npm run dev-server\n\n> ui-addin@1.0.0 dev-server c:\\git\\sample-project\\ui-addin\n> webpack-dev-server --mode development\n\nYou already have trusted access to https://localhost.\nCertificate: C:\\Users\\Manish.Kumar\\.office-addin-dev-certs\\localhost.crt\nKey: C:\\Users\\Manish.Kumar\\.office-addin-dev-certs\\localhost.key\ni \xef\xbd\xa2wds\xef\xbd\xa3: Project is running at https://127.0.0.1:3000/\ni \xef\xbd\xa2wds\xef\xbd\xa3: webpack output is served from /\ni \xef\xbd\xa2wds\xef\xbd\xa3: Content not from webpack is served from c:\\git\\sample-project\\ui-addin\n(node:19272) UnhandledPromiseRejectionWarning: TypeError: The 'compilation' argument must be an instance of Compilation\nat Function.getCompilationHooks (c:\\git\\sample-project\\ui-addin\\node_modules\\custom-functions-metadata-plugin\\node_modules\\webpack\\lib\\NormalModule.js:207:10)\nat c:\\git\\sample-project\\ui-addin\\node_modules\\custom-functions-metadata-plugin\\lib\\customfunctionsplugin.js:41:36\nat SyncHook.eval [as call] (eval at create (c:\\git\\sample-project\\ui-addin\\node_modules\\webpack\\node_modules\\tapable\\lib\\HookCodeFactory.js:19:10), <anonymous>:7:1)\nat SyncHook.lazyCompileHook (c:\\git\\sample-project\\ui-addin\\node_modules\\webpack\\node_modules\\tapable\\lib\\Hook.js:154:20)\nat Compiler.newCompilation (c:\\git\\sample-project\\ui-addin\\node_modules\\webpack\\lib\\Compiler.js:631:26)\nat c:\\git\\sample-project\\ui-addin\\node_modules\\webpack\\lib\\Compiler.js:667:29\nat eval (eval at create (c:\\git\\sample-project\\ui-addin\\node_modules\\webpack\\node_modules\\tapable\\lib\\HookCodeFactory.js:33:10), <anonymous>:14:1)\nat …

Run Code Online (Sandbox Code Playgroud)

office-addins webpack webpack-dev-server webpack-4

作者

2021 11-05

0
推荐指数

1
解决办法

4975
查看次数