Question

我是新手做出反应，试图学习webpack配置。我正在为我的项目使用webpack4，但是，在设置webpack之后，不会生成包文件，也不会生成js文件和html文件，并且没有错误。

控制台上的输出显示＆＃34;编译成功＆＃34;。我该如何解决。我已经挣扎了大约一个星期，没有任何在线资源似乎能给我我想要的东西。

const path = require('path');
const webpack = require('webpack');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const port = process.env.PORT || 3000;

const paths = {
    DIST: path.resolve(__dirname, 'dist'),
    SRC: path.resolve(__dirname, 'src'),
    JS: path.resolve(__dirname, 'src/js')
}

const htmlPlugin = new HtmlWebpackPlugin({
    template: "./src/index.html",
    filename: "./index.html"
});

module.exports = {
    mode: 'development',
    entry: path.join(paths.JS, 'index.js'),
    output: {
        path: paths.DIST,
        filename: 'app.bundle.js'
    },

    module:{
        rules: [
            {
                test: /\.js$/,
                exclude: /node_modules/,
                use: {
                    loader: "babel-loader"
                }
            },

            {
                test: /\.css$/,
                use: [
                    {
                        loader: "style-loader"
                    },

                    {
                        loader: "css-loader",
                        options:{
                            modules: true,
                            importLoaders: 1,
                            localIndentName: "[name]_[local]_[hash:base64]",
                            sourceMap: true,
                            minimize: true,
                            camelCase:true
                        }
                    }

                ]
            }
        ]
    },

    plugins: [htmlPlugin],

    devServer: {
        publicPath: paths.DIST,
        host: 'localhost',
        port: port,
        historyApiFallback: true,
        open:true,
        hot: true
    }
};

Answer 1

确保所有路径正确，没有丢失文件。

src/js/index.js
src/index.html

确保正确运行webpack以显示如下日志：

<强>的package.json

"scripts": {
    "start": "webpack --config webpack.config.js --bail --progress --profile"
},

并由npm start运行，然后会显示日志。

如果您愿意，可以使用新的babel版本。用这个改变你的bable：

"dependencies": {
    "@babel/core": "^7.0.0-beta.42",
    "@babel/preset-env": "^7.0.0-beta.42",
    "babel-eslint": "^8.0.3",
    "babel-loader": "^8.0.0-beta.0",
    "css-loader": "^0.28.11",
    "html-webpack-plugin": "^3.1.0",

    ...

    "style-loader": "^0.20.3",
    "webpack": "^4.4.1",
    "webpack-cli": "^2.0.13"
},

<强> .babelrc

{
  "presets": ["@babel/preset-env"],
  "plugins": ["@babel/plugin-proposal-object-rest-spread"]
}

然后更新您的webpack规则：

 {
    test: /\.js$/,
    use: {
      loader: 'babel-loader',
      options: {
        presets: ['@babel/preset-env'],
        plugins: [require('@babel/plugin-proposal-object-rest-spread')]
      }
    },
    exclude: /node_modules/
  },

未生成webpack包文件且没有错误

1 个答案: