webpack_origen/La configuración de package.json es como sigue:
+dist/
+js/
+bundle.js
+css/
+images/
+index.html
+src/
+js/
+index.js
+content.js
+css/
+index.css
+images/
+index.html
+node_modules/
+webpack.config.js
+package.json
+readme.md
{La configuración de webpack.config.js es como sigue:
"name": "prodinca_webpage",
"version": "1.0.0",
"description": "de PSD a HTML5 vol07",
"main": "./src/js/index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"build": "webpack --watch --colors",
"start": "webpack-dev-server --progress --colors"
},
"keywords": [
"udemy",
"practica",
"prueba",
"maquetación",
"página",
"web"
],
"author": "gerbo-san",
"license": "ISC",
"devDependencies": {
"babel-cli": "^6.24.1",
"babel-loader": "^7.0.0",
"babel-preset-es2015": "^6.24.1",
"css-loader": "^0.28.4",
"style-loader": "^0.18.2",
"webpack": "^2.6.1",
"webpack-dev-server": "^2.4.5"
}
}
var path = require('path');Las fuentes que utilicé para estos archivos son:
module.exports = {
entry: {
app: './src/js/index.js'
},
output: {
path: path.resolve(__dirname,'dist'),
filename: './js/bundle.js',
publicPath: '/dist/'
},
devServer: {
host: '0.0.0.0',
port: 8080,
inline: true
},
module: {
loaders: [
{
test: /(\.js |.jsx)$/,
loader: 'babel',
exclude: '/node_modules/',
query: {
presets: ['es2015']
}
},
{
test: /\.css$/,
loader: 'css-loader',
exclude: '/node_modules'
}
]
}
};
webpack - Tutorials/Getting started
webpack - Getting Started
Youtube - Webpack | Curso Completo Practico desde Cero
Youtube - Primeros pasos con Webpack
La definición de la plantilla para trabajar con webpack todavía no está completa, cuestión de tiempo.