[Tutorial] webpack entorno de desarrollo para construir Reaccionar pasos detallados

1. Instalar Node.js

WebpackEn realidad está Node.jsescrito, por lo que la primera instalación de Node.jsmedio ambiente. Y Node.jsel integrado NPMde gestión de paquetes, utilizamos muchos módulos detrás de la necesidad de utilización NPMde descargas.

En primer lugar entrar en la web oficial de Node.js , seleccione el sistema correspondiente a descargar el paquete de instalación, para windowslos usuarios descargar directamente el paquete de instalación se puede instalar, si el Macosusuario es recomendada cerveza para la instalación. Node.jsHay muchas versiones, incluyendo la versión estable y la versión de desarrollo, diferentes proyectos necesitan Node.jsdiferentes versiones, se recomienda que instale 8.xo posterior.

2. Instalar webpack

En el que necesitamos para crear un proyecto, crear una nueva carpeta, por ejemplo, voy a crear una unidad C se llama myappla carpeta (Sólo haga presentaciones, poner el disco de sistema no se recomienda en), Es myappes el directorio raíz del proyecto actual.
En la barra de direcciones raíz del proyecto directamente de entrada cmdy pulse ENTER, se puede abrir en este comando de directorio del sistema, como se muestra a continuación:

En el comando de entrada de línea de comandos, lo que genera una costumbre package.jsonarchivo se utiliza para describir los elementos en que se realiza la información almacenada el siguiente comando:

cnpm init -y

Nota: Este tutorial de uso consistente del espejo Taobao cnpmcomando para instalar, comprobar antes de utilizar este comando si el comando para instalar CNPM

Introduzca el siguiente comando para instalar, instalar webpack al proyecto local:

cnpm install --save-dev webpack 
#或者简写
cnpm i -D webpack

Tras la instalación correcta se myappgenerará automáticamente el siguiente bajo el proyecto node_modulesde directorios y package.jsonarchivos:

y luego instalar webpack-clila herramienta, ejecute el siguiente comando:

cnpm i -D webpack-cli

Una vez completado el comando, es necesario package.jsonque configure empaquetado de archivos de comandos. En package.jsonel archivo scripts, agregue las siguientes propiedades de los elementos de configuración:

{
    "scripts": {
        "build": "webpack --mode production"
    }
}

3. Instalación reaccionar y reaccionar-dom

En el símbolo del sistema, busque el directorio raíz del proyecto actual, a su vez, ejecute el siguiente comando:
instalar reaccionar:

cnpm i -S react

Instalación reaccionar-dom:

cnpm i -S react-dom

babel de instalación:

cnpm i babel-loader @babel/core @babel/preset-env -D

babel instalación preestablecido reaccionar:

cnpm i @babel/preset-react -D

4. Crear una estructura de directorios del archivo de origen

Creado en el proyecto de webpack.config.jsarchivo de configuración, y añadir en el fichero de configuración JSXsintaxis Babelapoyo del compilador, el documento dice lo siguiente:

module.exports = {
    resolve: {
        extensions: ['.wasm', '.mjs', '.js', '.json', '.jsx']
    },
    module: {
        rules: [
            {
                test: /\.jsx?$/, // jsx/js文件的正则
                exclude: /node_modules/, // 排除 node_modules 文件夹
                use: {
                    // loader 是 babel
                    loader: 'babel-loader',
                    options: {
                        // babel 转义的配置选项
                        babelrc: false,
                        presets: [
                            // 添加 preset-react
                            require.resolve('@babel/preset-react'),
                            [require.resolve('@babel/preset-env'), {modules: false}]
                        ],
                        cacheDirectory: true
                    }
                }
            }
        ]
    }
};

Fueron creados en el directorio raíz del proyecto srcy la publicestructura de carpetas del proyecto en este momento se ha convertido, en efecto, el siguiente cuadro:

proyecto de código se utiliza para almacenar archivos, como documentos o archivos .js .jsx;: src directorio
directorio público: archivo estático utilizados para almacenar artículos, tales como archivos .html o imágenes

Creado en el directorio público: archivo index.html (la página de inicio por defecto del proyecto);
creado en el directorio src: index.js, archivo app.js (escribir el código fuente);

public/index.htmlEl archivo de proyecto es la página de inicio por defecto, que dice lo siguiente:

<!DOCTYPE html>
<html lang="zh-CN">
    <head>
        <meta charset="UTF-8" />
        <title>Hello React</title>
    </head>
    <body>
        <div id="root"></div>
    </body>
</html>

src/App.jsEl archivo es un componente personalizado, de la siguiente manera:

import React from 'react';

function App () {
	return (
		<div>
			React from Webpack
		</div>
	);
};
export default App;

src/index.jsEl archivo de proyecto es una entrada de archivo, de la siguiente manera:

import React from 'react';
import ReactDom from 'react-dom';
import App from './App';

ReactDom.render(<App />,document.getElementById('root'));

Esto, la estructura de directorios de nuestro proyecto para construir completa.
Luego que hemos creado estos archivos, hacer algunas configuraciones. En primer lugar abrir el webpack.config.jsarchivo, la configuración webpackde la entrada, añada la siguiente:

module.exports = {
    entry: './src/index.js',  //添加入口配置项
    // ...
};

En la siguiente instalar html-webpack-plugineste plug-in, ejecute el comando siguiente:

cnpm i html-webpack-plugin -D

El plug-in tiene dos funciones principales:

1. Introducción de los recursos externos, tales como una secuencia de comandos de archivo html, enlace añadido dinámicamente después de cada compilación de hash, para evitar los problemas de caché de archivo de referencia externos;
2. Crear entrada del archivo html se puede generar, como una sola página HTML puede generar una entrada de archivo, la configuración de la N html-webpack-plugin puede generar n páginas de entrada.

Después de la instalación y, a continuación, modificar webpack.config.jsla configuración, introducido webpackel uso de plug-in:

const HtmlWebPackPlugin = require('html-webpack-plugin');
module.exports = {
    // ...
    plugins: [
        new HtmlWebPackPlugin({
            template: 'public/index.html',
            filename: 'index.html',
            inject: true
        })
    ]
};

Después de las operaciones anteriores se han completado, puede realizar comandos de paquete:

npm run build

Si aparece el siguiente contenido en la línea de comandos, resultó exitosa paquete:

Después de un paquete con éxito, el directorio raíz del proyecto generará una distcarpeta, la carpeta está almacenada en el empaquetado .htmly .jsarchivos.

5. Configurar el servidor local

Podemos estar basada en Node.jsun Expressconjunto de un servidor local, a través Expressde middleware webpack-dev-middlewarepara implementar y Webpackla interacción. Implementar el servicio local requiere los siguientes tres pasos:

Paso 1: Instalar el módulo de webpack-dev-servidor de
comando de instalación:

cnpm i webpack-dev-server -D

Paso dos: Configurar entrada de servicio
Después de la instalación exitosa, es necesario webpack.config.jsconfigurar los ajustes del servidor de archivos:

const HtmlWebPackPlugin = require('html-webpack-plugin');
const path = require('path');
module.exports = {
    mode: 'development',
    devtool: 'cheap-module-source-map',
    devServer: {
        contentBase: path.join(__dirname, './public/'),
        publicPath: '/',
        host: '127.0.0.1',
        port: 3000,
        stats: {
            colors: true
        }
    },
    //......
};

Paso 3: Configurar el comando de inicio
en package.jsonel archivo de scriptspropiedades, añadir startelementos de inicio:

{
    "scripts": {
        "build": "webpack --mode production",
        "start": "webpack-dev-server --mode development --open"
    }
}

Después de completar los pasos anteriores, ejecute la línea de comandos npm startse puede iniciar el servidor!
Después se inicia el servidor, se abrirá automáticamente el navegador y visitar nuestra configurado Dirección:

Cuando se modifica el código fuente, puede actualizar automáticamente la página.

Esto, Reaccionar entorno para construir con éxito, podemos desarrollar proyectos en este entorno, basado en el.

resumen

Debido Webpackprincipalmente para la construcción y artículos de embalaje, e incluso algunos estudiantes en el trabajo simplemente fuera de su alcance Webpack, o la configuración del proyecto de una sola vez Webpack, no va a ser utilizado de nuevo más tarde. Para estos estudiantes, espero que este tutorial puede introducir un conjunto de conocimientos para que en el futuro cuando se utilizan, pueden tener ideas y métodos de operación.
Allí los estudiantes van a decir, ahora están usando herramientas de andamiaje, directamente create-react-appambiente construido es bueno, conveniente y fácil. En primer lugar, esta visión es correcta, también recomiendo que utilice las herramientas para construir un entorno de andamio, sino como un ingeniero de front-end, sólo sé que el principio de funcionamiento del medio ambiente, con el fin de controlar mejor el marco, cuando el error de código, y no una pérdida.
WebpackNo sólo es la premisa del bastidor delantero del estudio, los estudiantes también piden futura entrevista, obligatoria examen escrito, trabajará con el contenido, con el desarrollo de la ingeniería front-end, Webpackse está convirtiendo cada vez más importante, especialmente para las grandes empresas de nivel de Internet, lo hará no va a Webpackser incluso capaz de determinar directamente si puede ser contratado. Así aprendemos Webpackes el primer paso en el trabajo de desarrollo de front-end.