-
Inicializamos un proyecto.
npm init -y
-
Instalamos las dependencias.
npm install --save-dev webpack webpack-cli npm i -D webpack webpack-cli
-
Añadimos nuestro fichero de configuración
webpack.config.js
.var path = require('path'); module.exports = { entry: './src/main.js', output: { path: path.resolve(__dirname, 'dist'), filename: 'main.bundle.js' } };
-
Creamos nuestro fichero de entrada
main.js
dentro del directoriosrc
window.load = function() { console.log('Hello world') }
-
Añadimos el comando
build
a nuestro proyecto en el ficheropackage.json
en la secciónscripts
."scripts": { "test": "echo \"Error: no test specified\" && exit 1", "build": "webpack" },
-
Ejecutamos el comando para comprobar que funciona correctamente. Deberia generar el fichero
main.bundle.js
en el directoriodist
npm run build
-
Instalamos dependenciar para incluir ficheros css.
npm install --save-dev style-loader css-loader npm i -D style-loader css-loader
-
Actualizamos la configuración de webpack en el fichero
webpack.config.js
.var path = require('path'); module.exports = { entry: './src/main.js', output: { path: path.resolve(__dirname, 'dist'), filename: 'main.bundle.js' }, module: { rules: [{ test: /\.css$/, use: [ 'style-loader', 'css-loader' ] }] } };
-
Creamos la hoja de estilos
style.css
en el directoriosrc
body { background-color: red; }
-
Incluimos el fichero
style.css
en el ficheromain.js
require('./style.css')
-
Ejecutamos de nuevo el comando para paquetizar nuestro proyecto.
npm run build
-
Instalamos nuestro primer plugin para nuestra página de entrada.
npm install --save-dev html-webpack-plugin npm i -D html-webpack-plugin
-
Actualizamos la configuración de webpack en el fichero
webpack.config.js
.var path = require('path'); var HtmlWebpackPlugin = require('html-webpack-plugin'); module.exports = { entry: './src/main.js', output: { path: path.resolve(__dirname, 'dist'), filename: 'main.bundle.js' }, module: { rules: [{ test: /\.css$/, use: [ 'style-loader', 'css-loader' ] }] }, plugins: [new HtmlWebpackPlugin({template: 'src/index.html'})] };
-
Creamos nuestro primer documento
index.html
en el directoriosrc
.<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <title>Webpack</title> </head> <body> <h1>Webpack</h1> </body> </html>
-
Ejecutamos de nuevo el comando para paquetizar nuestro proyecto.
npm run build
-
Arrancamos un servidor para visualizar nuestra página.
python -m http.server 3000 --directory ./dist
-
Instalamos un servidor para desarrollo.
npm install --save-dev webpack-dev-server npm i -D webpack-dev-server
-
Añadimos el comando
develop
a nuestro proyecto en el ficheropackage.json
en la secciónscripts
."scripts": { "test": "echo \"Error: no test specified\" && exit 1", "build": "webpack", "develop": "webpack-dev-server --mode development --port 3000" }
-
Ejecutamos el comando develop.
npm run develop
-
Creamos un fichero
.gitignore
para evitar subir ficheros innecesarios al repositorio.dist node_modules
-
Subimos los cambios a nuestro repositorio.
git add . git commit -m "Initial commit" git push origin master
dompruebas's Introduction
dompruebas's People
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.