この問題を投稿する前に、バックグラウンドチェックとしてかなりの数のことを行いました。だから、私の問題は:
-私はwebpack v4.6.0とwebpack-dev-server v3.1.3を使用しています-それらは一緒に正常に動作しますが、アプリケーションのソースマップを設定しようとしています- devtoolオプション は機能しません。
少なくとも私にとっては、リストのすべてのオプションを試してテストしました。
devtool: 'source-map'
_がそのまま使用できることを示唆していますが、私には当てはまりませんdevtoolModuleFilenameTemplate: info =>'file://' + path.resolve(info.absoluteResourcePath).replace(/\\/g, '/')
を追加しても、client.jsの代わりにindex.jsが表示される代わりに、あまり役に立ちませんでした webpack.SourceMapDevToolPlugin
_を使用しようとしましたが、devtoolsを削除したりfalseに設定したりしても、私のセットアップでは機能しません。その問題が一部のPRによって修正されるかどうか、または自分で解決しようとしたかどうかを知っていますか?ヒントやヘルプは大歓迎です!
ここに記載されているように出力を取得したいと思います blogpost 自分のファイルと元のファイルのコードへの直接リンクがあります
私のwebpack.js
_// webpack v4.6.0
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const WebpackMd5Hash = require('webpack-md5-hash');
const CleanWebpackPlugin = require('clean-webpack-plugin');
const stylish = require('eslint/lib/formatters/stylish');
const webpack = require('webpack');
module.exports = {
entry: { main: './src/index.js' },
output: {
devtoolModuleFilenameTemplate: info =>
'file://' + path.resolve(info.absoluteResourcePath).replace(/\\/g, '/'),
path: path.resolve(__dirname, 'dist'),
filename: '[name].[hash].js'
},
devtool: 'source-map',
devServer: {
contentBase: './dist',
hot: true
},
module: {
rules: [
{
test: /\.js$/,
exclude: /node_modules/,
loader: 'babel-loader'
},
{
test: /\.js$/,
exclude: /node_modules/,
loader: 'eslint-loader',
options: {
formatter: stylish
}
}
]
},
plugins: [
// new webpack.SourceMapDevToolPlugin({
// filename: '[file].map',
// moduleFilenameTemplate: undefined,
// fallbackModuleFilenameTemplate: undefined,
// append: null,
// module: true,
// columns: true,
// lineToLine: false,
// noSources: false,
// namespace: ''
// }),
new CleanWebpackPlugin('dist', {}),
new HtmlWebpackPlugin({
inject: false,
hash: true,
template: './src/index.html',
filename: 'index.html'
}),
new WebpackMd5Hash(),
new webpack.NamedModulesPlugin(),
new webpack.HotModuleReplacementPlugin()
]
};
_
私のpackage.json
_{
"name": "post",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"storybook": "start-storybook -p 9001 -c .storybook",
"dev": "webpack-dev-server --mode development --open",
"build": "webpack --mode production"
},
"author": "",
"license": "ISC",
"devDependencies": {
"@storybook/addon-actions": "^3.4.3",
"@storybook/react": "v4.0.0-alpha.4",
"babel-cli": "^6.26.0",
"babel-core": "^6.26.0",
"babel-loader": "^7.1.4",
"babel-preset-env": "^1.6.1",
"babel-preset-react": "^6.24.1",
"babel-runtime": "^6.26.0",
"clean-webpack-plugin": "^0.1.19",
"eslint": "^4.19.1",
"eslint-config-prettier": "^2.9.0",
"eslint-loader": "^2.0.0",
"eslint-plugin-prettier": "^2.6.0",
"eslint-plugin-react": "^7.7.0",
"html-webpack-plugin": "^3.2.0",
"prettier": "^1.12.1",
"react": "^16.3.2",
"react-dom": "^16.3.2",
"webpack": "v4.6.0",
"webpack-cli": "^2.0.13",
"webpack-dev-server": "v3.1.3",
"webpack-md5-hash": "0.0.6",
"webpack-serve": "^0.3.1"
},
"dependencies": {
"source-map-support": "^0.5.5"
}
}
_
編集:
同様の質問 here を見ましたが、誰も答えていないようです。 エラーは意図的に作成されました!これは、lintingエラーだけでなく、私のアプリのすべてのエラーに適用されます。 これは私のGITHUBリポジトリへのリンクです:https://github.com/marharyta/webpack-fast-development
UPDATE 01.05.2018
よりクリーンなセットアップで別のリポジトリを作成しました: https://github.com/marharyta/webpack-4.6.0-test そして、ここに到達する方法の詳細な説明: https:/ /medium.com/p/79fb676417f4/edit Webpackの貢献者からいくつかの提案がありましたが、それでも私にはうまくいきませんでした: https://github.com/marharyta/webpack-4.6.0-テスト/問題/ 1
UPDATE 02.05.2018
長い調査の後、私は以下に私の回答を投稿しました。問題は、ESLintと、おそらくCLIの方法で実行する必要があるため、いくつかのモードマーキングでした。 ESLintローダーの問題もここにあります: https://github.com/webpack-contrib/eslint-loader/issues/227 ここにも詳細な説明を記載した投稿を作成しました https://medium.com/@riittagirl/how-to-solve-webpack-problems-the-practical-case-79fb676417f4
長い間試行錯誤を繰り返した結果、ようやくWebpackのメンテナンス担当者から助けをもらいました。主な問題はエスリントでした。ローダーとしてロードすると、予期しない動作が発生します。 jsのwebpackローダーからeslintを削除することで修正できます。
以前のwebpackセットアップ:
// webpack v4
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const WebpackMd5Hash = require('webpack-md5-hash');
const CleanWebpackPlugin = require('clean-webpack-plugin');
const baseConfig = {
entry: { main: './src/index.js' },
output: {
path: path.resolve(__dirname, 'dist'),
filename: '[name].[hash].js'
},
devServer: {
contentBase: './dist',
hot: true,
open: true
},
module: {
rules: [
{
test: /\.js$/,
exclude: /node_modules/,
**use: [
{ loader: 'babel-loader' },
{
loader: 'eslint-loader',
options: { formatter: require('eslint/lib/formatters/stylish') }
}**
]
}
]
},
plugins: [
new CleanWebpackPlugin('dist'),
new HtmlWebpackPlugin({
inject: false,
hash: true,
template: './src/index.html',
filename: 'index.html'
}),
new WebpackMd5Hash()
]
};
if (process.env.NODE_ENV === 'development') {
baseConfig.devtool = 'inline-source-map';
}
module.exports = baseConfig
後に機能するWebpack:
// webpack v4
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const WebpackMd5Hash = require('webpack-md5-hash');
const CleanWebpackPlugin = require('clean-webpack-plugin');
module.exports = {
entry: { main: './src/index.js' },
output: {
path: path.resolve(__dirname, 'dist'),
filename: '[name].[hash].js'
},
devtool: 'cheap-module-source-map',
devServer: {
contentBase: './dist',
hot: true,
open: true
},
module: {
rules: [
{
test: /\.js$/,
exclude: /node_modules/,
**use: [{ loader: 'babel-loader' }]**
}
]
},
plugins: [
new CleanWebpackPlugin('dist'),
new HtmlWebpackPlugin({
inject: false,
hash: true,
template: './src/index.html',
filename: 'index.html'
}),
new WebpackMd5Hash()
]
};
私のpackeje.jsonは次のようになります:
{
"name": "post",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"build": "webpack --mode=production",
"start": "NODE_ENV=development webpack-dev-server --mode=development --hot"
},
"author": "",
"license": "ISC",
"devDependencies": {
"babel-cli": "^6.26.0",
"babel-core": "^6.26.0",
"babel-loader": "^7.1.4",
"babel-preset-env": "^1.6.1",
"babel-preset-react": "^6.24.1",
"babel-runtime": "^6.26.0",
"clean-webpack-plugin": "^0.1.19",
"eslint": "^4.19.1",
"eslint-config-prettier": "^2.9.0",
"eslint-loader": "^2.0.0",
"eslint-plugin-prettier": "^2.6.0",
"eslint-plugin-react": "^7.7.0",
"html-webpack-plugin": "^3.2.0",
"prettier": "^1.12.1",
"react": "^16.3.2",
"react-dom": "^16.3.2",
"webpack": "^4.6.0",
"webpack-cli": "^2.0.13",
"webpack-md5-hash": "0.0.6"
},
"dependencies": {
"webpack-dev-server": "^3.1.3"
}
}
私のブランチで作成された問題の提案も参照してください: https://github.com/marharyta/webpack-4.6.0-test
Webpack4では、webpack設定でモードを設定する必要があります。追加してください
mode: "development"
あなたのウェブパックの設定に。
NamedModulesPluginはすでに開発モードで使用されているため、削除できます。
オプション source-map
は製品ビルド用です。あなたの開発ビルドでは、webtoolがデフォルトでeval
を使用するため、devtoolプロップを削除します。うまくいかない場合は、以下を試してください。
devtool: 'cheap-module-eval-source-map'
それが私が使うものです。ほとんどの最小限の構成。
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const CleanWebpackPlugin = require('clean-webpack-plugin');
const stylish = require('eslint/lib/formatters/stylish');
const webpack = require('webpack');
module.exports = {
mode: 'development',
entry: { main: './src/index.js' },
output: {
filename: '[name].[hash].js'
},
resolve: {
extensions: ['.js', '.jsx']
},
devtool: 'cheap-module-eval-source-map',
devServer: {
hot: true,
open: true
},
module: {
rules: [
{
test: /\.jsx?$/,
exclude: /node_modules/,
use: [
{ loader: 'babel-loader' },
{ loader: 'eslint-loader', options: { formatter: stylish } }
]
}
]
},
plugins: [
new CleanWebpackPlugin('dist'),
new HtmlWebpackPlugin({
template: './src/index.html'
}),
new webpack.HotModuleReplacementPlugin()
]
};