标签: webpack-dev-server

我是新手webpack,尝试使用jade模板设置简单的配置来编写HTML/CSS PostCSS,hot reload并通过HTML提供服务webpack-dev-server以加快编码体验.

所以我将有多个入口点,一些jade包含包含的文件,CSS,img,字体和其他资产.

任何webpack配置建议？谢谢.

我尝试过html-webpack-plugin,配置就像

new HtmlWebpackPlugin({
    filename:'page1.html',
    templateContent: function(templateParams, compilation) {
        var templateFile = path.join(__dirname, './src/page1.jade');
        compilation.fileDependencies.push(templateFile);
        return jade.compileFile(templateFile)();
    },
    inject: true,
})

它正在工作,但没有热重新加载jade包含,没有css/img/font资产..

然后我发现indexhtml-webpack-plugin但它似乎只适用于HTML文件,不支持模板.

EDIT1:

现在,我最终得到了这个webpack.config.js:

var path = require('path'),
    webpack = require('webpack'),
    HtmlWebpackPlugin = require('html-webpack-plugin'),
    node_modules_dir = path.resolve(__dirname, 'node_modules');

module.exports = {
    entry: {
        index: ['webpack/hot/dev-server', './index.js'],
        page2: ['webpack/hot/dev-server', './page2.js'],
        //vendors: ['react', 'jquery'],
    },
    output: {
        filename: …

我在webpack.config文件中有这个输出配置:

config = { 
          ...
          output: {
              path: path.resolve(__dirname, 'dist'),
              filename: 'bundle.js',
              publicPath: 'http://localhost:8090/'
          },
... }

bundle.js不会写入指定的路径path; 它只能通过Web服务器提供,而我希望两者都可以.

我应该改变什么来同时拥有文件和Web服务器？

如何确定是否webpack.config.js通过webpackvs 加载webpack-dev-server？

我想代理/ v1/*到http://myserver.com,这是我的脚本

 devServer: {
   historyApiFallBack: true,
   // progress: true,
   hot: true,
   inline: true,
   // https: true,
   port: 8081,
   contentBase: path.resolve(__dirname, 'public'),
   proxy: {
     '/v1/*': {
       target: 'http://api.in.uprintf.com',
       secure: false
         // changeOrigin: true
     }
   }
 },

但它不起作用,

[编辑] Github Test Repo为您测试!!

我没有任何问题进行热重新加载,但每当我进行单个css更改时它会重新加载整个页面.我希望它能够注入任何css更改,并且理想情况下与react组件类似,除非真正需要完全重新加载.

**我得到以下控制台日志**

[WDS] App updated. Recompiling...
client?cd17:41 [WDS] App updated. Recompiling...
client?8505:41 [WDS] App updated. Recompiling...
client?cd17:41 [WDS] App updated. Recompiling...
client?8505:41 [WDS] App hot update...
dev-server.js:45 [HMR] Checking for updates on the server...
client?cd17:41 [WDS] App hot update...
dev-server.js:33 [HMR] Cannot apply update. Need to do a full reload!
(anonymous) @ dev-server.js:33
dev-server.js:34 [HMR] Error: Aborted because ./node_modules/css-loader/index.js?{"modules":true,"sourceMap":true,"importLoaders":2,"localIdentName":"[path]___[name]__[local]___[hash:base64:5]"}!./node_modules/postcss-loader/index.js?sourceMap&parser=postcss-scss!./src/components/shared/userPages/userPages.css is not accepted
Update propagation: ./node_modules/css-loader/index.js?{"modules":true,"sourceMap":true,"importLoaders":2,"localIdentName":"[path]___[name]__[local]___[hash:base64:5]"}!./node_modules/postcss-loader/index.js?sourceMap&parser=postcss-scss!./src/components/shared/userPages/userPages.css -> ./src/components/shared/userPages/userPages.css -> ./src/components/Signin/index.js -> ./src/routes.js -> ./src/index.js -> 0
    at …

你能解释一下如何从vue.js组件中的webpacker gem访问资产吗？例如 - 如何使用背景图像创建div.我已经尝试使用/ app/assets/images和/ app/javascripts/assets文件夹,但图像仅在模板部分可用,但不在样式部分:(

在我的情况下

<template>
    <div id="home">
        <div id="intro">
            <img src="assets/cover-image-medium.png" alt="">
        </div>
    </div>
</template>

工作正常,但是

<style scoped>
    #intro {
        height: 200px;
        background: url("assets/cover-image-medium.png");
    }
</style>

不工作:(

怎么了？

我是webpack的新手,几乎可以解决所有构建部分,但现在问题是我想将环境变量从.env文件传递到webpack配置,这样我就可以通过webpack.DefinePlugin插件将这些变量传递给我的构建文件了.

目前我能够直接从webpack传递环境变量到我的构建.请参阅我在webpack中使用的以下代码.

new webpack.DefinePlugin({
            "API_URL": JSON.stringify("http://my-api.com"),
            "SECRET_KEY" : "MYSECRETKEYGOESHERE"
        }),

我的package.json构建脚本是

"scripts": {
    "start": "NODE_ENV=development webpack-dev-server --progress --port 8000 --content-base app/build/src"
    } 

当我使用 webpack-dev 服务器时，问题有时会发生

FATAL ERROR: CALL_AND_RETRY_LAST Allocation failed - JavaScript heap out of memory

更多在这里

配置webpack.config.js

"webpack": "^4.5.0",
"webpack-cli": "^2.0.14",
"webpack-dev-server": "^3.1.3",

节点版本：

node -v
v9.3.0

操作系统版本：

macOS High Sierra 10.13.6

有没有人遇到过类似的问题？

我有一个由Vue cli 3生成的Vue项目,我的热重装突然停止在我的浏览器中工作.终端仍然会选择对代码所做的更改,但是,我的浏览器没有获取更改.我必须手动刷新才能获取新的更改.正如其他一些人所建议的那样,我手动设置poll: true了我vue.config.js,我也尝试设置代理,但都没有成功.

有什么建议让这个工作再次成功吗？

它是用我的第一个项目react,react-router,react-hot-loader,webpack-dev-server和webpack.当我更改react组件中的代码时,热加载器变得有效,但同时,控制台告诉我一个警告:

你不能改变"路由器路由"; 它会被忽略.

我不知道如何解决这个问题.有代码:

webpack代码:

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

    module.exports = {
      devtool: 'source-map' ,
      entry: [
        'webpack-dev-server/client?http://localhost:3000',
        'webpack/hot/only-dev-server',
        './jsx/index'
      ],
      output: {
        path: path.join(__dirname, 'public'),
        filename: 'bundle.js',
        publicPath: '/public/'
      },
      plugins: [
        new webpack.HotModuleReplacementPlugin(),
        new webpack.NoErrorsPlugin()
      ],
      resolve: {
        extensions: ['', '.js', '.jsx', 'json']
      },
      module: {
        loaders: [{
          test: /\.js$/,
          exclude: /node_modules/,   
          loaders: ['react-hot', 'babel'],
          }]
      },
      watch:true
    };

索引代码:

    import React from 'react' …