Utilisation de Webpack 4 et Babel 7
Pour configurer un fichier de configuration de webpack pour utiliser ES2015, Babel nécessite:
Installer les dépendances dev:
npm i -D webpack \
webpack-cli \
webpack-dev-server \
@babel/core \
@babel/register \
@babel/preset-env
npm i -D html-webpack-plugin
Créez un .babelrc
fichier:
{
"presets": ["@babel/preset-env"]
}
Créez votre 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;
Créez vos scripts dans package.json
:
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"build": "webpack",
"start": "webpack-dev-server --open"
},
Exécutez npm run build
et npm start
.
La configuration du webpack est basée sur un exemple de projet avec la structure de répertoires suivante:
├── README.md
├── package-lock.json
├── package.json
├── src
│ ├── Greeter.js
│ ├── index.html
│ └── index.js
└── webpack.config.babel.js
Exemple de projet: Langage de configuration Webpack utilisant Babel