mkdir practice
cd practice/
npm init -y
# init package.json file
npm install react react-dom
npm install --save-dev @babel/core @babel/preset-env @babel/preset-react webpack webpack-cli webpack-dev-server babel-loader css-loader style-loader html-webpack-plugin
var path = require('path')
module.exports = {
entry: './app/index.js',
output: {
path: path.resolve(__dirname, 'dist')
filename: 'index_bundle.js',
},
module: {
rules: [
{ test: /\.(js)$/, use: 'babel-loader'},
{ test: /\.(css)$/, use: ['style-loader', 'css-loader']}
]
},
mode: 'development',
pulgins: [
new HtmlWebpackPlugin({
template: 'app/index.html'
})
]
}
- style-loader: take css been required and insert into page.
- css-loader: look for any css import, ie
url('./background.png')
