Webpack basado en el uso de los archivos de configuración y el modo de procesamiento (Foto-based) (ii)

6.webpack configurado Vue

vue.js introducidas

• De seguimiento del proyecto, utilizaremos el desarrollo Vuejs, sino también para organizar un archivo de componentes especiales vue. Por lo tanto, vamos a aprender cómo integrar Vuejs en nuestro entorno webpack. Ahora, queremos utilizar Vuejs en el proyecto, por lo que no están obligados a depender de sus necesidades, por lo que necesita para instalar (Nota: Debido a que seguimos también se utilizan en la vue real del proyecto, que no depende de ningún pelo)

npm install vue --save

• Por lo tanto, la próxima será nuestra manera de aprender a utilizar antes de la Vue
  
  
  index.html plazo

Embalaje Proyecto - Mensajes de error

> [Vue warn]: You are using the runtime-only build of Vue where the
> template compiler is not available. Either pre-compile the templates
> into render functions, or use the compiler-included build.

■ Después de la edición, vuelva a empaquetar, ejecute el programa:

• El proceso de envasado sin ningún error (porque sólo un envase múltiple - un vue de JS sólo archivos), pero ejecutar el programa, el efecto deseado no se produce, y que hay un error en el navegador

■ Este error diciendo es que estamos usando una versión de tiempo de ejecución de sólo de Vue, ¿qué significa eso?

• Construcción de diferentes versiones de Vue
• tiempo de ejecución de sólo → código, puede que no tenga cualquier plantilla
• tiempo de ejecución compilador> etiqueta, puede plantilla, porque la plantilla compilador puede ser utilizado para compilar

■ Por lo tanto, modificamos la configuración webpack, añada lo siguiente a

modificar main.js
[Vue warn]: Cannot find element: #appesta atención de error bundle.js posición introducida, al final de la etiqueta del cuerpo de

completar los pasos anteriores desaparece de error

el molde y la diferencia (a)

■ Después de la operación normal, vamos a considerar otra pregunta:

• Si queremos que los datos en los datos que aparecen en la interfaz, debe ser modificado index.html
• Si estamos detrás de los componentes personalizados, debe ser modificado para utilizar el componente index.html
• Sin embargo, html plantilla desarrollaron después, no quiero cambiar manualmente con frecuencia, si puede hacerlo?

■ Definir las propiedades de la plantilla:

• En el ejemplo anterior Vue. Después definimos el inmuebles en index.html y en la unión #app, que IM Vue puede gestionar el contenido de las cuales se
• Aquí podemos div elementos ({mensaje}) contenido eliminado, manteniendo sólo un elemento div básica ID
• .? Pero si todavía estoy en la que desea el contenido ({mensaje}) debería ser cómo tratar con él
  podemos entonces definir un atributo de plantilla, de la siguiente manera:
  

introducción vue de desarrollo basado en componentes

■ Cuando el aprendizaje de desarrollo basado en componentes. Dije después del proceso de desarrollo Vue, adoptaremos la idea de desarrollo basado en componentes.

• Así, en el proyecto actual, si quisiera tomar la forma de desarrollo basado en componentes, cómo hacerlo?

■ Ver el siguiente código:

• Por supuesto, podemos extraer el código siguiente en un archivo js y exportación.
  
  Pero plantilla de código JS sin separación, tenemos que seguir mejorando

el molde y la diferencia (b)

■ Vuelva a empaquetar, ejecute el programa, y mostrar la misma estructura del código HTML resultados
■ Por lo tanto, ¿cuál es la relación EL plantilla y la plantilla es?

• En nuestro estudio anterior, sabemos que e | utilizado para especificar el Vue para gestionar DOM, lo que puede ayudar a resolver comando, los detectores de eventos, y así sucesivamente.
• Y si la instancia Vue especificar la plantilla, la plantilla plantilla de contenido reemplaza la plantilla correspondiente al montaje de intercambio EL.

■ hacer lo bueno es?

• Después de hacerlo no operamos index.html de nuevo más tarde en el desarrollo, sólo es necesario escribir la plantilla de la etiqueta correspondiente se puede

■ Sin embargo, escribir engorroso módulo de plantilla de cómo hacerlo?

• No importa, vamos a ser tirado después plantilla de contenido plantilla.
• La escritura se divide en tres partes :. plantilla, estilo de la escritura, la estructura se vuelve muy claro.
  carpeta nueva App.vue ( ^{(* ¯ (oo) ¯)} : main.js aquí antes de que los archivos CSS es dependiente y menos, pero para un lugar, prestar atención al resto de la sustitución ruta )
  
  
  
  directamente NPM plazo de construcción se quejará, razón cargador que no tienen un paquete de instalación correspondiente vue

proceso de encapsulación archivo .vue

■ Sin embargo, cuando un componente se organiza y se utiliza en la forma de un js objeto que es muy incómodo

• Por un lado, es muy molesto para el módulo de plantilla de escritura
• También - si hay aspectos de estilo, donde escribimos mejor?

■ Ahora, tenemos una nueva fórmula para organizar los componentes de un vue
■ Sin embargo, esta vez el archivo se puede cargar correctamente?

• No necesariamente este formato de archivo particular, así como especial, alguien tiene que ayudar a hacer frente a. . Vue-loader con la Plantilla-y-Compilador VUE
  ■ montado vue-loadervue-template-compilador

npm install vue-loader vue-template-compiler --save-dev

■ Modificar webpack.config.js archivo de configuración:

error NPM RUN Construir aparece
ERROR in Entry module not found: Error: Can't resolve 'babel-loader' in



de nuevo NPM correcta instalación> NPM plazo de construcción

archivo .vue añadir un subcomponente

componentes padre

NGP plazo de construcción

Permitir la libre archivo de importación de escritura .XXX sufijo

uso 6.plugin

pluigin comprensión

Lo plugin que?

• plug-in es un plug-significado, por lo general por una de las expansión de la infraestructura existente.
• webpack el plug-in, es una variedad de webpack ampliar la funcionalidad existente, tales como la optimización de envases, compresión de archivos, y así sucesivamente.

cargador y la diferencia plug-in

• loader principalmente para la conversión de ciertos tipos de módulos, es un un convertidor.
• plugin es un plugin, que es una extensión de webpack sí mismo, es - expansor.

Plugin por supuesto:

• Paso uno: NPM instalar plugins necesidad de utilizar (algunos webpack no tiene ninguna necesidad de instalar un enchufe incorporado)
• Paso dos: webpack.config.js dispuesto en el plug-in plugins.

■ A continuación, echamos un vistazo a lo que el proceso de expansión webpack existente plug-empaquetado puede hacer que nuestra webpack ser más fácil de usar.

Añadir Plugin de derechos de autor

■ utilización de dejar que un simple plug-in, añadir un aviso de copyright para el archivo empaquetado

• El plug-in nombre BannerPlugin, perteneciente webpack viene con plug-ins.

■ en las siguientes formas de modificar webpack.config.js archivo:

■ Programa reenvasados: Ver la cabeza bundle.js de archivos, consulte la siguiente información

El empaquetado conector HTML

■ En la actualidad, nuestro archivo index.htmI se almacena en el directorio raíz del proyecto.

• Sabemos que en la publicación de proyecto real dio a conocer los contenidos de la carpeta dist, pero la carpeta dist si hay un archivo index.html. Js después se empaqueta y otros documentos habría ningún significado.
• Así que tenemos que index.htm. | Archivo de paquete a la carpeta dist, puede utilizar este tiempo para tapar HtmlWebpackPlugin

■ HtmlWebpackPlugin complemento puede hacer estas cosas por nosotros:

• genera automáticamente un archivo index.html (se puede especificar una plantilla para generar)
• El archivo js envasados ​​se inserta automáticamente en el cuerpo a través de la etiqueta de script

■ Instalar el plug-HtmlWebpackPlugin

npm install html-webpack-plugin --save-dev

■ Usar plug-in, modificar el contenido de los plugins de archivos webpack .config.js parte de la siguiente manera:

Después de terminar de modificar el error de configuración
Modificar html-webpack-plugin versión
npm installpaquete de actualización node_module


carpeta dist después de la finalización index.html empaquetado

• La representación de aquí para generar la plantilla index.html función de la plantilla
• Además, tenemos que eliminar antes de añadir la salida de la propiedad publicPath
• O la etiqueta script src insertado puede ser un problema

js comprimido Plugin

■ Antes de la publicación del proyecto, necesitaremos inevitablemente a ser procesado compresión de archivos js-peer

• Aquí, estamos en la compresión de archivos js embalado
• Utilizamos un tercero se especifica plug-ins uglifyjs-WebPack-plugin, y la versión 1.1.1, consistente y CL2

npm install uglifyjs-webpack-plugin@1.1.1 --save-dev

instalación exitosa

■ modificar webpack.config.js archivo, utilice el plug-in:


■ Ver paquete bunlde.js archivo ya está comprimido antes. No se recomienda su uso durante el desarrollo.

7. Configuración de un servidor local

■ ofertas WebPack un servidor de desarrollo local opcional, las estructuras basadas en servidor local, Node.js marco de utilización expresa interna, se pueden conseguir
ahora queremos permitir que el navegador para actualizar automáticamente la visualización de los resultados de nuestros cambios.
■ pero es un módulo independiente, que debe ser instalado antes de su uso en el webpack

npm install --save-dev webpack-dev-server@2.9.1

■ devserver webpack también como una opción en la propia opción puede establecer las siguientes propiedades:

• contentbase: para los que una carpeta de archivos para proporcionar servicio local, el valor predeterminado es la carpeta raíz, estamos aquí para llenar ./dist
• Puerto: número de puerto
• en línea: en tiempo real actualizar la página
• historyApiFallback: En las páginas de SPA, dependiendo modo HTML5 de la historia

■ Archivo de configuración webpack.config.js se modifica de la siguiente manera:

■ Podemos entonces guiones de configuración adicionales:

• -open parámetro representa una directa abierto el navegador
• 

No es una vez más la acumulación de ejecución NPM plazo ver los resultados

más tarde NPM dev plazo
Vue modificar directamente el contenido de la página se actualice

Elaborar y publicar archivo separado

Fig nueva carpeta y archivo de tres js

en el maletero

cnpm install webpack-merge --save-dev

base.config.js

const path = require('path')
const webpack = require('webpack')
const HtmlWebpackPlugin = require('html-webpack-plugin')
const UglifyjsWebpackPlugin = require('uglifyjs-webpack-plugin')


module.exports = {
    entry: './src/main.js',//入口
    output: {
        path: path.resolve(__dirname, 'dist'),
        filename: 'bundle.js',
    },
    module: {
        rules: [
            {
                test: /\.css$/i,
                use: ['style-loader', 'css-loader'],
            },
            {
                test: /\.less$/,
                use: [{
                    loader: "style-loader" 
                }, {
                    loader: "css-loader" 
                }, {
                    loader: "less-loader" 
                }]
            },
            {
                test: /\.(png|jpg|gif|jpeg)$/,
                use: [
                    {
                        loader: 'url-loader',
                        options: {
                            limit: 13000,
                            name: 'img/[name].[hash:8].[ext]'
                        }
                    }
                ]
            },
            {
                test: /\.js$/,
                exclude: /(node_modules|bower_components)/,
                use: {
                    loader: 'babel-loader',
                    options: {
                        presets: ['es2015']
                    }
                }
            },
            {
                test: /\.vue$/,
                use: ['vue-loader']
            }
        ],
    },
    resolve: {
        extensions: ['.js', '.css', '.vue'],
        alias: {
            'vue$': 'vue/dist/vue.esm.js'
        }
    },
    plugins: [
        new webpack.BannerPlugin('最终版权归aaa所有'),
        new HtmlWebpackPlugin({
            template: 'index.html'
        }),
    ],
}

dev.config.js

const webpackMerge = require('webpack-merge')
const baseConfig = require('./base.config')

module.exports = webpackMerge(baseConfig,{
    devServer:{
        contentBase: './dist',
        inline:true
    }
})

prod.config.js

const UglifyjsWebpackPlugin = require('uglifyjs-webpack-plugin')
const webpackMerge = require('webpack-merge')
const baseConfig = require('./base.config')

module.exports = webpackMerge(baseConfig,{
    plugins: [
        new UglifyjsWebpackPlugin()
    ],
})

Después de configurar y luego dist borrar NPM plazo de construcción

modificado para

que
(de acuerdo con el "coderwhy" por encima de microblogueo acabado de vídeo vue por supuesto)