Question

我是webpack的新手。我正在学习使用Webpack反应并为其构建环境。

我有webpack-config.js

var path = require('path');


module.exports = {
    mode: 'production',
    entry: './script.js',
    output: 
    {
        path: path.resolve(__dirname, 'src'),
        filename: 'transpiled.js'
    },
    module: 
    {
        loaders: [
        {
            test: /\.js$/,
            loader: 'babel-loader',
            exclude: /node_modules/,
            query:
            {
                presets: ['es2015','react']
            }
        }
        ]
    }
}

和script.js

    import React from 'react';
import ReactDOM from 'react-dom';

ReactDOM.render(
    <h1>Hello world</h1>    
    document.getElementByIdName('first')
);

和index.html

<!DOCTYPE html>
<html>
<head>
    <title></title>
</head>
<body>
    <div class="first"></div>
    <script src="transpiled.js"></script>
</body>
</html>

在我写的Pakage.json文件中

"scripts": {
    "it": "webpack-dev-server --hot" 
  },

但是当我使用 “ npm run it” 运行npm时，它显示了

的错误

警告配置尚未设置“模式”选项。将“模式”选项设置为“开发”或“生产”以启用该环境的默认设置。多-dev-derver /客户端是否出错？http://localhost:8080 webpack / hot / dev-server ./src 找不到模块：错误：无法在D：\ React Js \ LearnReact'@multi -dev-derver / client？http://localhost:8080 webpack / hot / dev-server ./src中解析'./src' 我“ wdm”：编译失败。

请帮助我，我真的很困惑，想知道解决方案。

Answer 1

您需要将$code = file_get_contents('http://www.example.com/'); $html = new DOMDocument(); libxml_use_internal_errors(true); $html->loadHTML($code);选项传递给--config：

webpack-dev-server

还要在基本配置中将模式设置为webpack-dev-server --config path/to/webpack.config.js，稍后可以在进行生产构建时将其覆盖。

还要确保您的development文件在项目的根目录中，即在./script.js旁边，因为该文件路径是相对于package.json脚本执行而言的。

基于此配置-> npm，所有已构建资产最终都将位于项目根目录下的path: path.resolve(__dirname, 'src')文件夹中，并假定src文件位于（此路径相对于您的配置文件）。实际的文件夹只会在webpack.config.js中生成，production资产会存储在内存中。

您可能还想设置一个development：

publicPath

我还建议您使用output: { ... publicPath: '/' }，因为这样可以为您解析到js文件的正确路径。

html-webpack-plugin

然后，您不必包含脚本的路径，因此您的html文件如下所示：

var HtmlWebpackPlugin = require('html-webpack-plugin');

...
plugins: [
  new HtmlWebpackPlugin({
    filename: 'index.html', // name of file that will be outputted to 'src' when built
    template: // path to your html file relative to config
    inject: true
  })
]

webpack错误无法解析'./src'

1 个答案: