Warning: file_get_contents(/data/phpspider/zhask/data//catemap/9/javascript/382.json): failed to open stream: No such file or directory in /data/phpspider/zhask/libs/function.php on line 167

Warning: Invalid argument supplied for foreach() in /data/phpspider/zhask/libs/tag.function.php on line 1116

Notice: Undefined index: in /data/phpspider/zhask/libs/function.php on line 180

Warning: array_chunk() expects parameter 1 to be array, null given in /data/phpspider/zhask/libs/function.php on line 181

Warning: file_get_contents(/data/phpspider/zhask/data//catemap/7/css/38.json): failed to open stream: No such file or directory in /data/phpspider/zhask/libs/function.php on line 167

Warning: Invalid argument supplied for foreach() in /data/phpspider/zhask/libs/tag.function.php on line 1116

Notice: Undefined index: in /data/phpspider/zhask/libs/function.php on line 180

Warning: array_chunk() expects parameter 1 to be array, null given in /data/phpspider/zhask/libs/function.php on line 181
Javascript ExtractTextPlugin仅适用于webpack';s—内联标志_Javascript_Css_Webpack - Fatal编程技术网

Javascript ExtractTextPlugin仅适用于webpack';s—内联标志

Javascript ExtractTextPlugin仅适用于webpack';s—内联标志,javascript,css,webpack,Javascript,Css,Webpack,首先,我会说我对Webpack是新手,所以如果这是一个愚蠢的问题,我道歉 据我所知,--inline标志与webpack dev server一起用于热加载 但是,在使用ExtractTextPlugin并执行以下操作时: webpack webpack.config.js 我得到了一个包含大量警告和一些错误的输出: Hash: af8bbcc48570fd43cda4 Version: webpack 1.13.1 Time: 9383ms

首先,我会说我对Webpack是新手,所以如果这是一个愚蠢的问题,我道歉

据我所知,--inline标志与webpack dev server一起用于热加载

但是,在使用ExtractTextPlugin并执行以下操作时:

    webpack webpack.config.js
我得到了一个包含大量警告和一些错误的输出:

    Hash: af8bbcc48570fd43cda4
    Version: webpack 1.13.1
    Time: 9383ms
            Asset      Size  Chunks             Chunk Names
        bundle.js   2.96 MB       0  [emitted]  main
../css/styles.css  82 bytes       0  [emitted]  main
    bundle.js.map   3.54 MB       0  [emitted]  main
../css/styles.css.map  94 bytes       0  [emitted]  main

    [0] multi main 40 bytes {0} [built]
    [1] ./www/assets/js/entry.js 2 kB {0} [built]
    [8] ./webpack.config.js 1.24 kB {0} [built]
    + 524 hidden modules
    WARNING in ./~/fsevents/fsevents.js
    Critical dependencies:
    11:13-71 the request of a dependency is an expression
     @ ./~/fsevents/fsevents.js 11:13-71


    WARNING in ./~/fsevents/~/node-pre-gyp/lib/util/nw-pre-gyp/package.json
    Module parse failed: /Users/mt24/Documents/demo/node_modules/fsevents/node_modules/node-pre-gyp/lib/util/nw-pre-gyp/package.json Unexpected token (2:6)
    You may need an appropriate loader to handle this file type.
    SyntaxError: Unexpected token (2:6)
        at Parser.pp.raise (/Users/mt24/Documents/demo/node_modules/acorn/dist/acorn.js:923:13)
        at Parser.pp.unexpected (/Users/mt24/Documents/demo/node_modules/acorn/dist/acorn.js:1490:8)
        at Parser.pp.semicolon (/Users/mt24/Documents/demo/node_modules/acorn/dist/acorn.js:1469:73)
        at Parser.pp.parseExpressionStatement (/Users/mt24/Documents/demo/node_modules/acorn/dist/acorn.js:1994:8)
        at Parser.pp.parseStatement (/Users/mt24/Documents/demo/node_modules/acorn/dist/acorn.js:1772:188)
        at Parser.pp.parseBlock (/Users/mt24/Documents/demo/node_modules/acorn/dist/acorn.js:2009:21)
        at Parser.pp.parseStatement (/Users/mt24/Documents/demo/node_modules/acorn/dist/acorn.js:1753:19)
        at Parser.pp.parseTopLevel (/Users/mt24/Documents/demo/node_modules/acorn/dist/acorn.js:1666:21)
        at Parser.parse (/Users/mt24/Documents/demo/node_modules/acorn/dist/acorn.js:1632:17)
        at Object.parse (/Users/mt24/Documents/demo/node_modules/acorn/dist/acorn.js:885:44)
        at Parser.parse (/Users/mt24/Documents/demo/node_modules/webpack/lib/Parser.js:902:15)
        at DependenciesBlock.<anonymous> (/Users/mt24/Documents/demo/node_modules/webpack/lib/NormalModule.js:104:16)
        at DependenciesBlock.onModuleBuild (/Users/mt24/Documents/demo/node_modules/webpack-core/lib/NormalModuleMixin.js:310:10)
        at nextLoader (/Users/mt24/Documents/demo/node_modules/webpack-core/lib/NormalModuleMixin.js:275:25)
        at /Users/mt24/Documents/demo/node_modules/webpack-core/lib/NormalModuleMixin.js:259:5
        at Storage.provide (/Users/mt24/Documents/demo/node_modules/enhanced-resolve/lib/CachedInputFileSystem.js:52:20)
        at CachedInputFileSystem.readFile (/Users/mt24/Documents/demo/node_modules/enhanced-resolve/lib/CachedInputFileSystem.js:140:24)
        at DependenciesBlock.onLoadPitchDone (/Users/mt24/Documents/demo/node_modules/webpack-core/lib/NormalModuleMixin.js:255:7)
        at DependenciesBlock.loadPitch (/Users/mt24/Documents/demo/node_modules/webpack-core/lib/NormalModuleMixin.js:182:27)
        at DependenciesBlock.doBuild (/Users/mt24/Documents/demo/node_modules/webpack-core/lib/NormalModuleMixin.js:241:4)
        at DependenciesBlock.build (/Users/mt24/Documents/demo/node_modules/webpack/lib/NormalModule.js:84:14)
        at Compilation.buildModule (/Users/mt24/Documents/demo/node_modules/webpack/lib/Compilation.js:126:9)
        at /Users/mt24/Documents/demo/node_modules/webpack/lib/Compilation.js:309:10
        at /Users/mt24/Documents/demo/node_modules/webpack/lib/NormalModuleFactory.js:58:13
        at NormalModuleFactory.applyPluginsAsyncWaterfall (/Users/mt24/Documents/demo/node_modules/tapable/lib/Tapable.js:75:69)
        at onDoneResolving (/Users/mt24/Documents/demo/node_modules/webpack/lib/NormalModuleFactory.js:38:11)
        at onDoneResolving (/Users/mt24/Documents/demo/node_modules/webpack/lib/NormalModuleFactory.js:121:6)
        at /Users/mt24/Documents/demo/node_modules/webpack/lib/NormalModuleFactory.js:116:7
        at /Users/mt24/Documents/demo/node_modules/async/lib/async.js:726:13
        at /Users/mt24/Documents/demo/node_modules/async/lib/async.js:52:16
     @ ./~/fsevents/~/node-pre-gyp/lib ^\.\/.*$
(它没有使用webpack dev server,因为我不想为了这个问题而重新加载)

我的输出是:

    Hash: 7543a8fc94cb447e7082
    Version: webpack 1.13.1
    Time: 11073ms
                    Asset      Size  Chunks             Chunk Names
                bundle.js    278 kB       0  [emitted]  main
        ../css/styles.css  82 bytes       0  [emitted]  main
            bundle.js.map    351 kB       0  [emitted]  main
    ../css/styles.css.map  94 bytes       0  [emitted]  main

       [0] multi main 28 bytes {0} [built]
       [1] ./www/assets/js/entry.js 2 kB {0} [built]
        + 6 hidden modules
    Child extract-text-webpack-plugin:
            + 2 hidden modules
现在请注意,文件大小为278KB,没有更多的警告/错误

我的webpack.config.js看起来像:

    var ExtractTextPlugin = require('extract-text-webpack-plugin');
    var path = require('path');

    var nodeModulesPath = path.join(__dirname, 'node_modules');

    module.exports = {
        entry : [path.join(__dirname, '/www/assets/js/entry')],
        output: {
            filename: 'bundle.js',
            path: path.join(__dirname, '/www/dist/assets/js')
        },
        module: {   
            loaders: [
                { 
                    test:   /\.css$/,
                    loader: ExtractTextPlugin.extract('style-loader', 'css-loader')
                },
                {
                    test: /\.es6\.js$/,
                    exclude: nodeModulesPath,
                    loader: 'babel-loader',
                    query : {
                        presets : ['es2015']
                    }
                }, 
                { 
                    test:   /\.json$/,
                    loader: 'json-loader',
                    exclude: nodeModulesPath,
                },
            ],
        },
        plugins : [
             new ExtractTextPlugin(path.join('..','css', 'styles.css'))
        ],  
        resolveLoaded : {
            root : nodeModulesPath
        },
        resolve: {
           extensions: ['', '.js', '.es6', '.json', '']
        },  
        node: {
            console: 'empty',
            fs: 'empty',
            net: 'empty',
            tls: 'empty'
        }, 
        devtool : 'source-map'
    };
我的问题是:

  • 我应该一直使用--inline标志吗?这是标准做法吗

  • 为什么删除--inline后bundle.js的文件大小会增加很多

  • 一旦绑定到生产构建中,使用--inline会导致任何奇怪的行为吗

  •     var ExtractTextPlugin = require('extract-text-webpack-plugin');
        var path = require('path');
    
        var nodeModulesPath = path.join(__dirname, 'node_modules');
    
        module.exports = {
            entry : [path.join(__dirname, '/www/assets/js/entry')],
            output: {
                filename: 'bundle.js',
                path: path.join(__dirname, '/www/dist/assets/js')
            },
            module: {   
                loaders: [
                    { 
                        test:   /\.css$/,
                        loader: ExtractTextPlugin.extract('style-loader', 'css-loader')
                    },
                    {
                        test: /\.es6\.js$/,
                        exclude: nodeModulesPath,
                        loader: 'babel-loader',
                        query : {
                            presets : ['es2015']
                        }
                    }, 
                    { 
                        test:   /\.json$/,
                        loader: 'json-loader',
                        exclude: nodeModulesPath,
                    },
                ],
            },
            plugins : [
                 new ExtractTextPlugin(path.join('..','css', 'styles.css'))
            ],  
            resolveLoaded : {
                root : nodeModulesPath
            },
            resolve: {
               extensions: ['', '.js', '.es6', '.json', '']
            },  
            node: {
                console: 'empty',
                fs: 'empty',
                net: 'empty',
                tls: 'empty'
            }, 
            devtool : 'source-map'
        };