Last active
November 6, 2023 03:31
-
-
Save jaysoo/4b476d0f65ed02f19f7150a0a290b04a to your computer and use it in GitHub Desktop.
Minimum webpack config for development
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
// 1. npm init | |
// 2. npm install --save webpack webpack-dev-server babel-loader babel-preset-es2015 | |
// 3. mkdir dist && touch index.html | |
// 4. Include `<script src="/bundle.js"></script>` inside index.html | |
// 5. mkdir src && touch src/index.js | |
// 6. Add some code to index.js (e.g. `console.log('Hello, World!')) | |
// 7. npm start | |
// 8. Browse to http://localhost:8080/dist/ | |
const webpack = require('webpack') | |
module.exports = { | |
context: __dirname + "/src", | |
entry: "./index", | |
output: { | |
path: __dirname + "/dist", | |
filename: "bundle.js" | |
}, | |
module: { | |
loaders: [ | |
{ | |
test: /\.js$/, | |
exclude: /node_modules/, | |
loader: 'babel', | |
query: { | |
presets: ['es2015'] | |
} | |
} | |
] | |
}, | |
plugins: [ | |
new webpack.DefinePlugin({ | |
'process.env.NODE_ENV': JSON.stringify(process.env.NODE_ENV) | |
}) | |
] | |
} |
Another question, shouldn't you use preset-env rather than es-2015? I may transpile things that are supported by browsers
@jaysoo - Thank you for sharing this, found via a search. 👍
even minimumer
module.exports = {
entry: './src/index.js',
output: {
path: __dirname + '/dist',
filename: 'bundle.js',
},
}
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
loader: 'babel'
-->loader: 'babel-loader'
?