我希望能够调试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\"",发布于 2019-05-01 08:33:54
试试这个:
"client": "webpack-dev-server --mode development --devtool 'eval-source-map' --hot",但我建议将webpack配置文件拆分为单独的文件(webpack.dev.js和webpack.prod.js),因为随着时间的推移,此节点的推荐量将随着您的需求的增长而增加,并且将很难维护。
发布于 2019-05-01 08:45:03
我认为“开发模式”会使我的资源保持独立。
不,它只是没有缩小生成的代码。Webpack必须将代码打包到一个文件中,因为import / export还没有得到真正的支持(如果添加了支持,则必须手动将所有文件添加到HTML中,然后将它们逐个加载。换句话说,你需要Webpack)。
但是,如果生成源代码地图,浏览器调试器就能够向您展示代码在传递溢出之前的情况。例如,如果绑定文件中发生错误,则可以将其位置映射到原始文件中的行。
https://stackoverflow.com/questions/55933575
复制相似问题