Empty and configured webpack project to use with whatever you want framework
-
Install Node & Npm
-
Create new proyect folder:
mkdir webpack_basic
-
Open new console and go to proyect folder
-
Start node proyect (essential to get package.json file):
npm int
-
Fill proyect info (you are here, xD)
-
Install dependecies:
Webpack globally if you don't have alrready
npm install webpack -g
Webpack and webpack-dev-server locally
npm install webpack webpack-dev-server -D
Babel dependecies
npm install babel-loader babel-core babel-preset-es2015 -D
Style dependecies
npm install sass-loader css-loader style-loader -D
npm install node-sass --save-dev
- Create webpack.config.js:
touch webpack.config.js
And add within
// webpack.config.js
var webpack = require('webpack');
module.exports = {
context: __dirname,
entry:{
app: './src/index.js'
},
output: {
path: __dirname + '/build',
filename: 'bundle.js',
publicPath: '/build/'
},
resolve: {
extensions: ['.js', '.jsx']
},
devServer: {
host: '0.0.0.0',
port: 8081,
inline: true
},
module: {
loaders: [
//JS & JSX loader
{
test: /(\.js|.jsx)$/,
loader: 'babel-loader',
exclude:'/node_modules',
query: {
presets: ['es2015']
}
},
{
test:/\.scss$/,
// loader:'style!css!sass',
loaders: [ 'style-loader', 'css-loader', 'sass-loader' ],
exclude: /node_modules/
}
]
},
//to uglify JS output code
plugins: [
new webpack.optimize.UglifyJsPlugin()
]
}
- Create view src/index.js or jsx and add:
// COMPONENTS
import Message from './message';
// STYLESHEET
require('./style/style.scss')
// CONST
const STRING_TEXT = new Message('webpack basic')
STRING_TEXT.showMessage()
- Create class src/message.js or jsx an add:
export default class Message {
// Call constructor
constructor (value) {
// Set parameter value to own value
this.value = value
}
// Create a function to show value
showMessage () {
console.log(`Hi! this is: ${this.value}`)
}
}
- Build release version
npm run build
- Try to run server like (may be require admin permissions):
npm run start
- Open sever in the browser at localhost:8001