时间戳

首页 > 解决方案 > 有什么方法可以不使用 Webpack/React 打包？

javascript - 有什么方法可以不使用 Webpack/React 打包？

问题描述

我希望能够调试 JS、调整 CSS 等。我认为“开发模式”将使我的源代码保持独立。但是 webpack 打包了一切。

如何将其配置为不打包？

我的webpack.config.js：

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const CleanWebpackPlugin = require('clean-webpack-plugin');

const outputDirectory = 'dist';

module.exports = {
    entry: ['babel-polyfill', './src/client/client.js'],
    output: {
        path: path.join(__dirname, outputDirectory),
        filename: 'bundle.js'
    },
    module: {
        rules: [{
            test: /\.(js|jsx)$/,
            exclude: /node_modules/,
            use: {
                loader: 'babel-loader'
            }
        },
        {
            test: /\.css$/,
            use: ['style-loader', 'css-loader']
        },
        {
            test: /\.(png|woff|woff2|eot|ttf|svg)$/,
            loader: 'url-loader?limit=100000'
        }
        ]
    },
    resolve: {
        extensions: ['*', '.js', '.jsx']
    },
    devServer: {
        port: 3000,
        proxy: {
            '/api': 'http://localhost:8080'
        }
    },
    plugins: [
        new CleanWebpackPlugin([outputDirectory]),
        new HtmlWebpackPlugin({
            template: './public/index.html',
            favicon: './public/favicon.ico'
        })
    ]
};

还有我的npm run dev脚本：

"client": "webpack-dev-server --mode development --devtool inline-source-map --hot",
"server": "nodemon src/server/server.js",
"dev": "concurrently \"npm run server\" \"npm run client\"",

标签： javascriptnode.jsreactjswebpack

解决方案

我认为“开发模式”会使我的来源分开

不，它只是不会缩小生成的代码。Webpack 必须将代码捆绑到一个文件中，因为import/export还没有真正得到支持（如果添加了支持，您必须手动将所有文件添加到 HTML 中，并且它们将逐个文件加载。换句话说：您需要 Webpack）。

但是，如果您生成源映射，则浏览器调试器能够向您显示代码在转译之前的情况。例如，如果捆绑文件中发生错误，它可以将发生错误的位置映射到原始文件中的行。

推荐阅读