I am learning to set up my own webpack and I encountered a few curious issues.
Here is my webpack.development.config.js:
const path = require('path');
const CleanWebpackPlugin = require('clean-webpack-plugin');
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.export = {
entry: './src/index.js',
output: {
filename: '[name].bundle.js',
path: path.resolve(__dirname, './dist'),
publicPath: ''
},
mode: 'development',
devServer: {
contentBase: path.resolve(__dirname, './dist'),
index: 'index.html',
port: 3000
},
modules: {
rules: [
{
test: /\.(png|jpg)$/,
use: ['file-loader']
},
{
test: /\.(css)$/,
use: ['style-loader', 'css-loader']
},
{
test: /\.(js|jsx)$/,
exclude: '/node_modules/',
use: {
loader: 'babel-loader',
options: {
presets: ['@babel/env', '@babel/preset-react'],
plugins: ['transform-class-properties']
}
}
}
]
},
plugins: [
new CleanWebpackPlugin(),
new HtmlWebpackPlugin({
filename: 'index.html',
description: 'Sample code',
})
]
}
When i run the following command:
webpack-dev-server --config ./webpack.development.config.js --hot
Here is the output in my console:
I:\sample>npm run dev
> [email protected] dev I:\datum_gui
> webpack-dev-server --config ./webpack.development.config.js --hot
i 「wds」: Project is running at http://localhost:8080/
WARNING in configuration
The 'mode' option has not been set, [...]
ERROR in ./src/index.js 23:4
Module parse failed: Unexpected token (23:4)
You may need an appropriate loader to handle this file type.
| const render = (Component) => {
| ReactDOM.render(
> <AppContainer>
| <CookiesProvider>
| <Provider store={store}>
@ multi (webpack)-dev-server/client?http://localhost:8080 (webpack)/hot/dev-server.js ./src main[2]
i 「wdm」: Failed to compile.
I have a few questions:
1) How come the code cannot seem to pick up that i specified port 3000 but instead it defaulted to port 8080?
2) I have set mode: 'development' but yet there is a warning given that i have been defaulted to 'production'
3) What loader am i missing that the code cannot understand my index.js?
Node packages:
- "babel-loader": "^8.0.5",
- "webpack": "^4.33.0",
- "webpack-cli": "^3.2.3",
- "webpack-dev-server": "^3.1.14",
- "babel-plugin-transform-class-properties": "^6.24.1",
- "@babel/preset-env": "1.4.0",
- "@babel/preset-react": "7.0.0",