标签: webpack-4

我在过去的两天里遇到过这个问题.所以我决定从webpack构建过程中完全禁用uglifyjs-webpack-plugin.我无法在webpack 4上找到任何东西.

我看到这个答案建议导入图像的语法如下所示(注释掉).在我的情况下,它没有成功(抱怨在该文件中找不到任何模块),我不得不切换到当前活动的语法.

// import Author from "../assets/author.png";
var Author = require("../assets/author.png");

我可以想象的差异是我正在使用TypeScript(通过awesome- typescript -loader转换我的TSX 并加载我的PNG 文件加载器),他们似乎使用JSX.但就我的理解而言,这一切都转化为普通的JS并最终要求.

作为React的菜鸟,我不确定这种差异的原因是什么,但我也不确定要谷歌如何调查自己.

我正在尝试编辑/理解用ES6编写的模态插件的源代码,链接在这里.

<div aria-hidden="true" class="modal micromodal-slide" id="modal-1">
    <div class="modal__overlay" data-micromodal-close="" tabindex="-1">
        <div aria-labelledby="modal-1-title" class="modal__container" role="dialog">
            <header class="modal__header">
                <h2 class="modal__title" id="modal-1-title">Micromodal</h2>
                <button aria-label="Close modal" class="modal__close" data-micromodal-close=""></button>
            </header>


            <main class="modal__content" id="modal-1-content">
                <p>Try hitting the <code>tab</code> key and notice how the focus stays within the modal itself. Also, <code>esc</code> to close modal.</p>
            </main>


            <footer class="modal__footer">
                <button class="modal__btn modal__btn-primary">Continue</button> <button aria-label="Close this dialog window" class="modal__btn" data-micromodal-close="">Close</button>
            </footer>
        </div>
    </div>
</div> 

// Button that triggers the modal
<a data-micromodal-trigger="modal-1" href="#">Toggle</a>

// I am importing …

我开始使用 webpack，现在在 publicPath 和 contentBase 之间感到困惑。该文档在用例上不清楚。

我想使用 Webpack 的 React Loadable 在 ReactJs 中实现 SSR。下面是 package.json 文件中的几行：

const { ReactLoadablePlugin } = require('react-loadable/webpack');
plugins:[
    new ReactLoadablePlugin({
        filename: path.resolve(__dirname, 'dist', 'react-loadable.json')
    }),
]

但我收到以下错误：

> [webpack-cli] TypeError: compiler.plugin is not a function
at ReactLoadablePlugin.apply

我该如何解决？

我正在使用角度编译器: const AngularCompilerPlugin = require('@ngtools/webpack').AngularCompilerPlugin;

使用这些编译器选项:

"angularCompilerOptions": {
"genDir": "./build/compiled",
"outDir": "./build/compiled",
"skipMetadataEmit": true,
"debug": true},

我的package.json的相关部分是:

"@ngtools/webpack": "^6.0.0",
"@angular/router": "^5.2.0",
"webpack": "4.8.3",
"webpack-cli": "2.1.4",

而我的angularCompilerPlugin配置是:

new AngularCompilerPlugin({
  tsConfigPath: 'path-to-tsconfig.webpack.json',
  entryModule: 'path-to-app.module#AppModule',
  sourceMap: true
}),

通过这些配置,我得到:

ERROR in ./$$_lazy_route_resource lazy namespace object
Module not found: Error: Can't resolve 'path-/alerts/module.ngfactory.js' in 'path-to-app-folder/$$_lazy_route_resource'
 @ ./$$_lazy_route_resource lazy namespace object
 @ ./node_modules/@angular/core/esm5/core.js
 @ multi core-js/shim classlist.js reflect-metadata zone.js/dist/zone jquery/dist/jquery rxjs/Rx lodash jquery.panzoom moment moment-timezone @angular/common @angular/core @angular/http @angular/router @angular/forms semantic

请任何指示或帮助.

我们有一个传统的服务器渲染应用程序(非SPA),其中每个页面都增加了vuejs

现有的webpack 3配置是

webpack.config.js

var webpack = require('webpack')
var path = require('path')

const ExtractTextPlugin = require('extract-text-webpack-plugin')
const CleanWebpackPlugin = require('clean-webpack-plugin')
const CopyWebpackPlugin = require('copy-webpack-plugin')

module.exports = {
    entry: {
        shared: './shared.js',
        pageA: './pageA.js',
        // pageB: './pageB.js',
        // pageC: './pageC.js',
        // etc
    },

    resolve: {
        alias: { vue: 'vue/dist/vue.esm.js' },
    },

    output: {
        path: path.join(__dirname, './dist'),
        filename: '[name].js',
    },
    module: {
        rules: [
            {
                test: /\.css$/,
                exclude: /node_modules/,
                use: ExtractTextPlugin.extract({
                    use: [
                        {
                            loader: 'css-loader',
                            query: {
                                sourceMap: true,
                            },
                        }, …

我想使用新版本的Webpack安可来访问它提供的所有新功能.然而,按照官方指南中的步骤,我无法使它工作,我得到Unknown "encore_entry_link_tags" function

我做了什么:

1. 更新我的php版本以匹配Webpack安可包的请求(> 7.1.9)
2. 跑 composer require symfony/webpack-encore-bundle
3. 在package.json 0.21.0上更新安可的版本
4. 跑 npm install --save-dev
5. 清除缓存

我不确定为什么这不起作用.任何建议将不胜感激.

我有这个小应用程序在 webpack-dev-server 的开发模式下运行良好，但是当我使用生产模式生成的 dist 文件夹中的捆绑文件时，我在浏览器中得到的只是这个错误：

Uncaught DOMException: Failed to execute 'pushState' on 'History': A history state object with URL 'file:///C:/' cannot be created in a document with origin 'null' and URL 'file:///C:/Users/cristi/work/react_test_ground/dist/index.html'.

我该如何解决这个 pushState 问题？

最初我尝试用 React.lazy 和 Suspense 拆分代码，因为 webpack 抛出了这个错误：

WARNING in asset size limit: The following asset(s) exceed the recommended size limit (244 KiB).
This can impact web performance.
Assets:
  2c7b7b6becb423b8f2ae.bundle.js (413 KiB)

WARNING in entrypoint size limit: The following entrypoint(s) combined asset size exceeds the recommended …

我们必须更新一些依赖项才能切换到 Webpack 4，并且在尝试在同一项目中进行import混合时，我们在 webpack 中收到警告，在浏览器中收到错误。require

我们有一个非常大的项目（300多个文件），其中一些文件使用var Pkg = require('./fileName');和 ，module.exports = MyComponent而其他文件使用import Pkg from './fileName'和export default MyComponent，并且希望不必使用 require/module.exports 遍历每个文件并更新它们。

网页包警告：

WARNING in ./index.js 15:17-20
"export 'default' (imported as 'App') was not found in './App.jsx'

浏览器错误：

App.jsx:20 Uncaught TypeError: Cannot assign to read only property 'exports' of object '#<Object>'
    at Module.eval (App.jsx:20)
    at eval (App.jsx:21)
    at Module../App.jsx (bootstrap:83)
    at __webpack_require__ (bootstrap:19)
    at eval (index.js:2)
    at Module../index.js (bootstrap:83)
    at …