标签: webpack-dev-server

有没有办法利用CLI配置在https上运行webpack-dev-server？

问题是连接socket.io结束http,而不是https.

存在一种解决方法,但它非常烦人.

1. 手动将https 包含webpack-dev-server在您的index.html

<script src="https://localhost:8080/webpack-dev-server.js"></script>

2. 配置要包含的每个端点webpack/hot/only-dev-server.

app: [
    'webpack/hot/only-dev-server',
    './app.js'
],

// ... more entry points that include the same [] ...

我尝试使用webpack到我的应用程序,但它每次构建我的应用程序60-100秒.如何禁用重建文件node_modules/*和/ bower_components/*或为单独的块(每个模块或共享)构建它们.

这是配置的一部分:

 {
    test: /\.js$/,
    exclude: /(node_modules|bower_components)/,
    loaders: ['ng-annotate', 'babel-loader']
 },

和

resolve: {
    moduleDirectories: ['node_modules', 'bower_components']
},

如何通过每次禁用库的重建来提高性能？

我正在使用webpack-dev-server来加载我的所有资产,包括CSS.目前,我的CSS在JavaScript之后加载,这导致我的应用程序问题在某些依赖于布局存在的地方.

如何确保在JavaScript执行之前加载CSS？

我认为必须有一种方法可以做到这一点module,也许我可以勾选一个回调？或者可能通过配置样式加载器来优先考虑？

这是我的index.js:

import './styles/main.scss';
import './scripts/main.js';

if (module.hot) {
  module.hot.accept();
}

这是我的样式加载器:

{
        test: /\.(scss)$/,
        loader: 'style!css?&sourceMap!postcss!resolve-url!sass?sourceMap'
},

在这个样式加载器Github问题上也提出了类似的问题:https://github.com/webpack/style-loader/issues/121

Webpack本身工作正常,但webpack-dev-server却没有.基本上,webpack为我创建了2个构建文件,一个后端捆绑和一个前端捆绑.所以,我为每个人都有一个webpack-config.js.我想用webpack-dev-server开发我的前端代码,你可以从我的webpack-config文件中看到我的front-end-bundle.js.当我运行web-pack-dev服务器时,它能够找到并构建我的front-end.js和index.html,但是在控制台中没有任何渲染,它给了我一个"Uncaught ReferenceError:require not not defined"

// var nodeExternals = require('webpack-node-externals');
var webpack = require('webpack');

module.exports = {
entry: './browser/entry.js',
output: {
    path: './builds',
    filename: 'frontend.js'
},
plugins: [
    new webpack.DefinePlugin({
        'process.env.NODE_ENV': '"development"'
    }),
    new webpack.DefinePlugin({
        'process.env': {
            'NODE_ENV': '"development"'
        }
    })
],
module: {
    loaders: [
        {
            test: [/\.es6$/, /\.js$/, /\.jsx$/],
            exclude: 'node_modules',
            loader: 'babel-loader',
            query: {
                presets: ['react', 'es2015', 'stage-1']
            }
        }, 
        {
            test: /\.json$/,
            loader: 'json-loader'
        }, 
        {
            test: /\.html$/,
            loader: 'html-loader'
        }, 
    ]
},
resolve: { …

运行webpack-dev-server很好.首页加载正常.但是当我刷新浏览器时,每2秒'WDS disconnected'会出现在控制台和浏览器中无限重新加载.此问题仅出现在Firefox/Firefox Developer Edition浏览器中.浏览器Chrome,Edge,IE11没有问题.

package.json:
....
"webpack": "^1.13.3",
"webpack-dev-server": "^1.16.2"

webpack.config.js:
....
entry: [
    //'app': './app/app.ts'
 'webpack-dev-server/client?http://localhost:8080/', './app/app.ts'

],
output: {
    publicPath: 'http://localhost:8080/',
    filename: 'app/app.bundle.js'
},
....

Firefox Developer Edition 51.0a2

我正在尝试在Angular 1应用程序中启用html5mode.此模式要求Web服务器为各种路径返回相同的HTML.在nginx中,这是通过添加一个try ... index.htmlfor 来完成的location,这意味着如果找不到页面,nginx总是会失败回到主html.

但是,虽然开发我没有nginx,但我使用Webpack dev服务器来提供页面,并使用后端代理.如何配置Webpack dev服务器以类似的方式运行？

当我在编译时运行 webpack-dev-server 时遇到问题而不是控制台错误，但当我转到http://localhost:8080/时在浏览器中抛出下一个错误：

未捕获的类型错误：util.inherits 不是函数。

这很奇怪，因为在没有 webpack-dev-server 的情况下，它可以很好地与 webpack 配合使用。当我调试错误时，错误位于文件 webpack:///./~/websocket-driver/lib/websocket/streams.js?875d 中，错误是此段：

var Stream = require('stream').Stream,
    util   = require('util');


var IO = function(driver) {
  this.readable = this.writable = true;
  this._paused  = false;
  this._driver  = driver;
};
util.inherits(IO, Stream); // this line

webpack.config.js

[ { devtool: 'eval-source-map',
    resolve: { extensions: [Object], modules: [Object], alias: [Object] },
    module: { rules: [ { test: /\.css$/, use: [Object] },
 { test: /\.scss/, use: [Object] },
 { test: /\.json/, use: [Object] },
 { …

我第一次尝试使用webpack而且我收到此错误,

Error: EACCES: permission denied, mkdir '/dist'
    at Error (native)

在尝试运行我的生产脚本时.

A sudo chown -R 'whoami' /dist回来了chown: /dist: No such file or directory.

我该如何解决这个问题？

我有一个问题是使Firefox开发者工具(Firefox Developer Edition 59.0b7)与Webpack在开发模式(使用webpack-dev-server)中生成的CSS源映射一起工作.

在Firefox开发者工具中,当我检查一下时,它的CSS规则位置是一些块的哈希值,例如blob:http://localhost:9090/1e451f65-5d5a-4155-a7a9-96df9945244b而不是真实的文件名(下面的屏幕).这些位置链接也是无效的 - 单击它们不会将我带到源文件.

我有时也会在Firefox Developer Tools控制台中遇到这种错误,我可能会将其连接起来:

Source map error: Error: sourceMapURL could not be parsed Resource URL: blob:null/b9a1fdd6-c0a3-4426-9df0-d50f1e8dc670 Source Map URL: data:application/json;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi9ob21lL3JvYmVydC9wcm9ncmFtbWluZy93ZWJwYWNrLXBsYXlncm91bmQvc3JjL2NvbXBvbmVudC1hL2NvbXBvbmVudC1hLmNzcyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQTtJQUNJLGNBQWM7SUFDZCx1QkFBdUI7SUFDdkIsa0JBQWtCO0NBQ3JCOzs7QUFHRDtJQUNJLG1CQUFtQjtJQUNuQixpQkFBaUI7SUFDakIsaUJBQWlCO0NBQ3BCOzs7QUFHRDtJQUNJLG1CQUFtQjtDQUN0QiIsImZpbGUiOiJjb21wb25lbnQtYS5jc3MiLCJzb3VyY2VzQ29udGVudCI6WyIuQ29tcG9uZW50QSB7XG4gICAgZGlzcGxheTogZmxleDtcbiAgICBmbGV4LWRpcmVjdGlvbjogY29sdW1uO1xuICAgIGZsZXgtd3JhcDogbm93cmFwO1xufVxuXG5cbi5Db21wb25lbnRBLUhlYWRlciB7XG4gICAgbWFyZ2luLWJvdHRvbTogM3B4O1xuICAgIGJhY2tncm91bmQ6ICNlZWU7XG4gICAgZm9udC1zaXplOiAxLjVlbTtcbn1cblxuXG4uQ29tcG9uZW50QS1Cb2R5IHtcbiAgICBwYWRkaW5nLWxlZnQ6IDEwcHg7XG59XG4iXSwic291cmNlUm9vdCI6IiJ9[Learn More]

在Chrome开发者工具(Chrome 59.0.3071.104)中,一切都显示得非常好 - 我在检查器(下面的屏幕)中看到了原始文件名,并在单击文件名链接后看到了原始的SCSS内容.

有没有办法让Firefox正常运行Webpack的CSS源地图,如Chrome？

我的配置

我在开发者工具选项中启用了启用源地图.devtools.debugger.source-maps-enabled被设置为true在about:config.

以下是我的Webpack配置的相关摘录:

// I tried different devtools but the results in Firefox were the same.
devtool: 'eval-source-map'

(...)

// Chain of loaders for CSS files.
{
    test: /\.(scss|sass|css)$/,
    use: [
        {
            loader: 'style-loader',
            options: { …

我开发了 React 应用程序，之前我在 webpack v3 上构建了相同的应用程序，现在我升级到 v4。
在 v3 dev-server上它工作得很好，但在 v4 上它需要花费大量时间来构建，并且每次它都会再次构建整个项目（可能就是这个原因）
我的webpack.dev.js

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

module.exports = {
    entry: './src/app.js',
    output: {
        path: path.join(__dirname, 'public'),
        filename: 'bundle.js'
    },
    devtool: 'inline-source-map',  
    module: {
        rules: [
            {
                test: /\.js$/,
                exclude: /node_modules/,
                use: {
                loader: "babel-loader"
                }
            },
            {
                test: /\.s?css$/,
                use: [
                    MiniCssExtractPlugin.loader,
                    {
                        loader: 'css-loader',
                        options: {
                            sourceMap: true,
                            minimize:false,
                            importLoaders: 1,
                        } …