- This is a project skeleton for developing in ES6 with Webpack
- To setup, run npm install, remove remote origin, and start coding!
- Additional guide included if you are interested on the steps I followed to setup the environment
project
│ README.md
| package.json
│ webpack.config.js
| node_modules (after npm install)
│
└───build
│ │ index.html
| | app.bundle.js
| | app.bundle.js.map
|
└───src
│ index.js
| index.scss
└───app
│ app.js
└───components
npm install
git remote rm origin
In the project folder:
npm init
npm install --save-dev babel-loader babel-core
npm install --save-dev babel-preset-env
npm install --save-dev babel-plugin-transform-runtime
npm install --save babel-runtime
Add in package.json:
"babel": {
"presets": [
"env"
],
"plugins": [
["transform-runtime", {
"helpers": false,
"polyfill": false,
"regenerator": true,
"moduleName": "babel-runtime"
}]
]
},
presets-env: If you want to use ES6
plugins-transform-runtime: Eliminates duplication of babel helper functions (increases performance)
npm install --save-dev webpack
npm install --save-dev style-loader
npm install --save-dev css-loader
npm install --save-dev sass-loader
npm install --save-dev node-sass
touch webpack.config.js
Add in webpack.config.js:
var path = require('path');
module.exports = {
context: path.join(__dirname, 'src'),
entry: {
app: './index.js'
},
output: {
path: path.join(__dirname, 'build'),
filename: '[name].bundle.js'
},
devtool: 'source-map',
module: {
rules: [
{
test: /\.js$/,
use: 'babel-loader',
exclude: /node-modules/
},
{
test: /\.scss$/,
use: [
{
loader: 'style-loader'
},
{
loader: 'css-loader',
options: {
sourceMap: true
}
},
{
loader: 'sass-loader',
options: {
sourceMap: true
}
}
]
}
]
}
}
entry: The file you want to convert
output: The converted file named app.bundle.js
rules: Sets the loaders
source-map: If you want to edit sass/css in devtools
Add build script in package.json
"scripts": {
"build": "webpack"
}
Run build to create new files
npm run build
npm install --save-dev webpack-dev-server
Add in webpack.config.js
devServer: {
contentBase: path.join(__dirname, 'build'),
inline: true,
stats: 'errors-only'
}
Add script in package.json
"scripts": {
"start": "webpack-dev-server --open"
}
Run script to start server
npm start
Open browser in url
http://localhost:8080/webpack-dev-server
{
"name": "project-webpack",
"version": "1.0.0",
"description": "* This is a project skeleton for developing in ES6 with Webpack * To setup, run npm install and start coding! * Additional guide included if you are interested on the steps I followed to setup the environmnet for the seed project",
"main": "webpack.config.js",
"babel": {
"presets": [
"env"
],
"plugins": [
["transform-runtime", {
"helpers": false,
"polyfill": false,
"regenerator": true,
"moduleName": "babel-runtime"
}]
]
},
"scripts": {
"start": "webpack-dev-server --open",
"build": "webpack"
},
"repository": {
"type": "git",
"url": "git+https://github.com/jdiejim/Seed-project-webpack.git"
},
"author": "",
"license": "ISC",
"bugs": {
"url": "https://github.com/jdiejim/Seed-project-webpack/issues"
},
"homepage": "https://github.com/jdiejim/Seed-project-webpack#readme",
"devDependencies": {
"babel-core": "^6.24.1",
"babel-loader": "^7.0.0",
"babel-plugin-transform-runtime": "^6.23.0",
"babel-preset-env": "^1.4.0",
"babel-runtime": "^6.23.0",
"css-loader": "^0.28.1",
"node-sass": "^4.5.2",
"sass-loader": "^6.0.3",
"style-loader": "^0.17.0",
"webpack": "^2.4.1",
"webpack-dev-server": "^2.4.5"
}
}
var path = require('path');
module.exports = {
context: path.join(__dirname, 'src'),
entry: {
app: './index.js'
},
output: {
path: path.join(__dirname, 'build'),
filename: '[name].bundle.js'
},
devtool: 'source-map',
module: {
rules: [
{
test: /\.js$/,
use: 'babel-loader',
exclude: /node-modules/
},
{
test: /\.scss$/,
use: [
{
loader: 'style-loader'
},
{
loader: 'css-loader',
options: {
sourceMap: true
}
},
{
loader: 'sass-loader',
options: {
sourceMap: true
}
}
]
}
]
},
devServer: {
contentBase: path.join(__dirname, 'build'),
inline: true,
stats: 'errors-only'
}
}