标签: webpack

我在我的应用程序中使用了一个expressAPI，因此我使用webpack-dev-middleware和webpack-hot-middleware。

我试图弄清楚webpack --color当我webpack通过 API 使用时如何获取该选项。

这就是我现在所拥有的：

const webpack = require('webpack')
const webpackConfig = require('../../webpack.config')
const compiler = webpack(webpackConfig)

const webpackDevMiddleware = require('webpack-dev-middleware')(compiler, {
  noInfo: true
})
const webpackHotMiddleware = require('webpack-hot-middleware')(compiler)

app.use(webpackDevMiddleware)
app.use(webpackHotMiddleware)

我目前正在使用webpack@2.2.0-rc.3.

我正在尝试使用https://www.npmjs.com/package/git-revision-webpack-plugin这个据说公开COMMITHASH变量的webpack 插件在我的 React 应用程序中显示 git commit hash

在我的 jsx 中我包括：

<p>{process.COMMITHASH}</p>

并在生产 webpack 配置中安装插件，如下所述：

plugins: [
  new GitRevisionPlugin()
]

但生成的 html 返回<p></p>

context: path.join(__dirname, 'resources/assets/bundle/js'),
  entry: [
    'webpack/hot/dev-server',
    'webpack-hot-middleware/client',
    './*.js'
  ]

上面的代码有效吗？而不是像这样指定每个文件

context: path.join(__dirname, 'resources/assets/bundle/entries'),
  entry: [
    'webpack/hot/dev-server',
    'webpack-hot-middleware/client',
    './abc.js',
    './def.js'
  ]

我怎样才能包含整个文件夹？

我想将我的 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")
  }
};

和文件夹结构：

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

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

谢谢

我正在关注本教程，我正在尝试让 brotli 与 angular 项目一起工作我创建了一个 ```custom-webpack.config.js 文件并将其放在 angular.json 所在的根目录中。（也试过 src 文件夹，但没有用）一旦我将 angular.json 文件更新为

"architect": {
        "build": {
          "builder": "@angular-builders/custom-webpack:browser",
          "options": {
            "customWebpackConfig": {
              "path": "./custom-webpack.config.js"
             },
            ...

我收到错误 An unhandled exception occurred: Job name "..getProjectMetadata" does not exist.

我也跑了npm i -D compression-webpack-plugin brotli-webpack-plugin ，让我的custom-webpack.config.js文件看起来像

const CompressionPlugin = require(`compression-webpack-plugin`);
const BrotliPlugin = require(`brotli-webpack-plugin`);
const path = require(`path`);
module.exports = {
    plugins:[
        new BrotliPlugin({
            asset: '[fileWithoutExt].[ext].br',
            test: /\.(js|css|html|svg|txt|eot|otf|ttf|gif)$/
        }),
        new CompressionPlugin({
            test: /\.(js|css|html|svg|txt|eot|otf|ttf|gif)$/,
            filename(info){
                let opFile= info.path.split('.'), …

我有一个简单的 scss 文件

.navItem {
  cursor: pointer;
    
  &.active {
    color: $primaryPurple;
  }
    
  &:hover {
    color: $primaryPurple;
  }
    
  span {
    margin-left: 10px;
  }
}

出于某种原因，:hover有效但.active不起作用。正如您在下图中所看到的，li显然有活动类，但我没有看到字体颜色 css 发生了变化。

为了增加 vuetify 的 v-switch 的宽度，我想修改 vuetify 的 scss 变量的值。

vuetify是通过vue-cli配置的，开发代码如下。

// src/assets/css/overrides.scss
$font-size-root: 24px;
$switch-width: 400px;
$switch-track-width: 400px;

// vue.config.js
module.exports = {
  transpileDependencies: ['vuetify'],
  configureWebpack: {
    devtool: 'source-map',
  },
  css: {
    loaderOptions: {
      scss: { // 8.0.3
        prependData: `@import "@/assets/css/overrides.scss";`,
      },
    },
  },
};

但一切都没有改变。我在做什么蠢事？

参考：https : //vuetifyjs.com/en/customization/sass-variables/ https://cli.vuejs.org/guide/css.html#css-modules

我正在启动一个新的 Rails 6 应用程序。如果我理解正确的话，Webpack(er) ( gem webpacker) 已经取代了 Sprockets 作为包含/缩小 JS ( source )的新标准。此外，Rails 6 现在都需要Node.js 和 Yarn。

我是否正确地假设 Node.js 和 Yarn 依赖项仅仅是由于包含了 Webpack，或者 Rails 6 的其他组件也需要它们？

从 Rails 6 应用程序中删除 Webpack 和 Node 和 Yarn 并继续使用 Rails Asset Pipeline（除了缺少 Webpack 功能）是否有任何可能的缺点？

有人能帮我吗？我只是创建反应应用程序然后我立即启动它。然后我得到了这样的错误。我对 webpack 了解不多。

CMD

./src/index.js 1:48
Module parse failed: Unexpected token (1:48)
File was processed with these loaders:
 * ./node_modules/@pmmmwh/react-refresh-webpack-plugin/loader/index.js
 * ./node_modules/babel-loader/lib/index.js
You may need an additional loader to handle the result of these loaders.
> $RefreshRuntime$ = require('C:/Users/LENOVO/Mine/project-new/node_modules/react-refresh/runtime.js');
| $RefreshSetup$(module.id);
|

我只是输入npx create-react-app ./目录npm start 然后这个错误发生了。我曾尝试制作 3 个 react 应用程序，但发生了同样的事情，而且我以前从未接触过 webpack。

应用程序.js

import logo from './logo.svg';
import './App.css';

function App() {
  return (
    <div className="App">
      <header className="App-header">
        <img src={logo} className="App-logo" alt="logo" />
        <p>
          Edit <code>src/App.js</code> and …

dockerhub 构建 dockerfile 时出现此错误

错误：最终加载器 (./node_modules/awesome-typescript-loader/dist/entry.js) 没有返回缓冲区或字符串

我在网上搜索了各种解决方案，但没有找到任何有效的解决方案。

"webpack": "^5.38.1" "awesome-typescript-loader": "^5.2.1"

这是我的 docker 文件

# build environment
FROM node:12.22.1-alpine as build
WORKDIR /app
COPY package.json /app/package.json
RUN npm cache clean --force 
RUN npm install
COPY . /app
ENV PORT 80
ENV NODE_ENV=development
RUN npm run dev

# production environment
FROM nginx:stable-alpine
COPY nginx.test.conf /etc/nginx/conf.d/default.conf
COPY --from=build /app/dist /usr/share/nginx/html

EXPOSE 80
CMD ["nginx", "-g", "daemon off;"] 

配置文件

{
  "compilerOptions": {
    "outDir": "./dist/",
    "noImplicitAny": true,
    "target": "es5",
    "lib": [
      "dom",
      "dom.iterable", …