Tutorial básico de Webpack
1. Uso básico
2. Uso de HtmlWebpackPlugin
3. Uso de WebpackDevServer
4. Compilación de código ES6
Uso básico:
cree el archivo package.json, abra la herramienta de línea de comando y ejecútela
npm init -y
Instalar webpack y webpack-cli
npm install webpack webpack-cli --save-dev
Cree la carpeta src en el directorio raíz, luego cree el archivo index.js en ella y escriba un código simple de palabra de saludo.
console.log("hello word")
Cree el archivo de configuración webpack.config.js en el directorio raíz
const path = require('path')
module.exports = {
mode: 'development',
entry: path.join(__dirname, 'src', 'index.js'),
output: {
path: path.join(__dirname, 'src', 'dist'),
filename: 'bundle.js'
}
}
Modificar el comando de scripts del archivo package.json
"build": "webpack"
Ejecute el paquete npm run build
Utilice el complemento HtmlWebpack
instalar
npm install html-webpack-plugin --save-dev
Modificar el archivo de configuración webpack.config.js
const path = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin')
module.exports = {
mode: 'development',
entry: path.join(__dirname, 'src', 'index.js'),
output: {
path: path.join(__dirname, 'src', 'dist'),
filename: 'bundle.js'
},
plugins: [
new HtmlWebpackPlugin({
template: path.join(__dirname, 'src', 'index.html'),
filename: 'index.html'
})
]
}
Crea un nuevo index.html en el directorio src
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
</body>
</html>
Ejecute el paquete nuevamente npm run build
Usando Webpack DevServer
instalar
npm install webpack-dev-server --save-dev
Modificar el archivo de configuración webpack.config.js
devServer: {
port: 8000,
static: path.join(__dirname, 'dist')
}
Modificar el comando de scripts del archivo package.json
"dev": "webpack-dev-server"
Ejecute npm ejecute dev
Visita http://localhost:8000/
Modifique el archivo index.html y haga clic en Guardar. La página cambiará.
Compilar código ES6
Escribe un fragmento de código ES6 en el archivo index.js
const sum = (num1, num2) => {
return num1 + num2
}
console.log(sum(1,2))
Al observar el código fuente, puede encontrar que todavía está escrito en ES6. Para que sea compatible con navegadores de versiones inferiores, es necesario convertirlo.
Instalar babel
npm install @babel/core @babel/preset-env babel-loader --save-dev
Cree el archivo de configuración .babelrc en el directorio raíz
{
"presets": ["@babel/preset-env"]
}
修改配置文件 webpack.config.js
module: {
rules: [
{
test: /\.js$/,
loader: 'babel-loader',
include: path.join(__dirname, 'src'),
exclude: /node_modules/
}
]
},
Al mirar el código fuente, encontrará que el código ES6 se ha convertido en ES5. 
Desde entonces, básicamente ha aprendido la página web.