Utilizzo di Webpack 4 e Babel 7
Per impostare un file di configurazione del webpack per utilizzare ES2015 è necessario Babel:
Installa le dipendenze degli sviluppatori:
npm i -D webpack \
webpack-cli \
webpack-dev-server \
@babel/core \
@babel/register \
@babel/preset-env
npm i -D html-webpack-plugin
Crea un .babelrc
file:
{
"presets": ["@babel/preset-env"]
}
Crea il tuo config webpack, webpack.config.babel.js
:
import { resolve as _resolve } from 'path';
import HtmlWebpackPlugin from 'html-webpack-plugin';
const config = {
mode: 'development',
devServer: {
contentBase: './dist'
},
plugins: [
new HtmlWebpackPlugin({
filename: 'index.html',
template: 'src/index.html'
})
],
resolve: {
modules: [_resolve(__dirname, './src'), 'node_modules']
}
};
export default config;
Crea i tuoi script in package.json
:
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"build": "webpack",
"start": "webpack-dev-server --open"
},
Corri npm run build
e npm start
.
La configurazione del webpack si basa su un progetto di esempio con la seguente struttura di directory:
├── README.md
├── package-lock.json
├── package.json
├── src
│ ├── Greeter.js
│ ├── index.html
│ └── index.js
└── webpack.config.babel.js
Progetto di esempio: linguaggio di configurazione Webpack che utilizza Babel