Utilice el paquete web para crear un entorno de desarrollo vue (2)

Después de la última vez, el segundo artículo comenzó a configurar aún más

Las reglas antiguas, continúan desarrollándose en base al código v0.0.1 , esta vez el código después de la configuración se dividirá en v0.0.2

Use menos para mejorar la experiencia de desarrollo

Instalar y usar css sin preprocesador

npm install --save-dev less less-loader

Modifique la configuración, porque testpuede recibir expresión regular, luego para cssy lesscoincidir, podemos escribir:test: /\.(less|css)$/,

webpack.base.js

Modificar el test:/\.css$/módulo original

module.exports = {
    
    
  // ...
  module: {
    
    
    rules: [
      {
    
    
        test: /\.(less|css)$/,
        use: ['vue-style-loader', {
    
     loader: 'css-loader', options: {
    
     esModule: false } }, 'less-loader']
      }
    ]
  }
  // ...
}

Una vez completada la configuración, regrese App.vue. Lo agregamos en la etiqueta de estilo lang="less". Y escríbelo de acuerdo con la menos gramática

Ver aplicación

<style lang="less">
  .text-red {
     
     
    color: #000;
  }

  .avatar {
     
     
    width: 100px;
    height: 100px;
    &.bg-avatar {
     
     
      background-image: url('./assets/image/avatar.jpg');
      background-size: 100% 100%;
      background-repeat: no-repeat;
    }
  }
</style>

Puede crear un nuevo /src/assets/css/common.lessarchivo, intente @importintroducir la función

/src/assets/css/common.less

body {
  background-color: #909090;
}

Ver aplicación

<style lang="less">
  @import './assets/css/common.less';
  .text-red {
     
     
    color: #000;
  }

  .avatar {
     
     
    width: 100px;
    height: 100px;
    &.bg-avatar {
     
     
      background-image: url('./assets/image/avatar.jpg');
      background-size: 100% 100%;
      background-repeat: no-repeat;
    }
  }
</style>

Puedes ver que están todos vigentes, debido a los anteriores url-loader. Entonces, cuando presentamos los archivos, fue sencillo y rentable ~

Configurar el autocompletado del prefijo CSS

Los principales navegadores tienen diferentes prefijos. Es demasiado doloroso escribirlos uno por uno. ¿Te imaginas que border-raidus también tendrá prefijos compatibles (aunque ahora es compatible con todos los navegadores)?

Si desea agregar automáticamente un prefijo al paquete, debe usar postcss-loaderyautoprefixer

npm i autoprefixer postcss-loader -D

Antes de la configuración, permítanme hablar sobre algunos pozos. Si la configuración de postcss-loader y autoprefixer no es válida, puede prestar atención a:

Antes de configurar Autoprefixer, primero debe agregarlo Browserslist. Puede ser una ventaja en el directorio raíz .browserslistrc, el archivo también puede package.jsonañadir el archivo: browserslist. Pero debe agregarse, de lo contrario, el prefijo automático no surtirá efecto.
En segundo lugar, debe crear un directorio en la raíz postcss.config.jsdetrás de hablará
Procesamiento de versión de Autoprefixer
webpack.base.js

Según Loader 从右往左的执行顺序, nos postcss-loaderubicamos en la penúltima posición.

module.exports = {
    
    
  // ...
  module: {
    
    
    rules: [
      {
    
    
        test: /\.(less|css)$/,
        use: [
          'vue-style-loader',
          {
    
     loader: 'css-loader', options: {
    
     esModule: false } },
          'postcss-loader',
          'less-loader'
        ]
      }
    ]
  }
  // ...
}

package.json
No pago más archivos, esta configuración se hace directamente en package.json

{
    
    
  "browserslist": ["last 2 version", "> 1%", "iOS >= 7", "Android > 4.1", "Firefox > 20"]
}

Agregue el archivo postcss.config.js al directorio raíz

module.exports = {
    
    
  plugins: [require('autoprefixer')]
}

¿Por qué necesito crearlo por separado postcss.config.jsy no puedo escribirlo en la configuración del paquete web?

Después de la prueba, postcss.config.jsel propósito de la existencia es que el paquete web postcss-loaderya no es compatible. Escriba pluginsun archivo . Por lo tanto, se requieren archivos adicionales para la configuración.

configuration has an unknown property 'rules'. These properties are valid:
   object { amd?, bail?, cache?, context?, dependencies?, devServer?, devtool?, entry?, externals?, infrastrdule?, name?, node?, optimization?, output?, parallelism?, performance?, plugins?, profile?, recordsInputPath?, resolve?, resolveLoader?, serve?, stats?, target?, watch?, watchOptions? }

La forma más sencilla de agregar una prueba css que debe tener un prefijo es display:flex;. Ver el efecto

Por qué, debido a que la autoprefixerversión de instalación automática es demasiado alta, instalé el "autoprefixer": "^10.0.0"
concreto para ver los problemas

Junto a autoprefixerdegradar un

npm uninstall autoprefixer

npm install [email protected] -D

Al final, el prefijo está automáticamente incompleto.

Configurar la separación de estilos CSS

Punto clave: antes de comenzar a usar la separación de estilo CSS y JS, debe tener muy clara la diferencia entre / y ./ en publicPath. !
Si no comprende el papel de publicPath, puede leer esta parte primero: La diferencia entre publicPath en webpack / vue-cli

Después de trabajar durante tanto tiempo, el prefijo de css finalmente está bien, pero
no encontré el efecto del empaquetado. El css original está mezclado en JS, lo que también significa que el archivo JS grande original ahora es aún peor. el estilo de la página es lo suficientemente complicado, no puedo creerlo

Luego use la mini-css-extract-pluginconfiguración css de separación y compresión

npm i mini-css-extract-plugin -D

webpack.base.js

Css o cambie el módulo, esta vez para vue-style-loaderdeshacerse de
la carpeta de salida css y la situación para configurar un directorio que no sea raíz, debe configurar publicPath. De acuerdo con la diferencia de publicPath en webpack / vue-cli mencionada anteriormente, lo uso en el entorno de desarrollo /. Utilizado en un entorno de producción ../. MiniCssExtractPlugin.loaderTambién configure publicPath por separado ../. No sé por qué, recuerda leer el enlace anterior ~

const MiniCssExtractPlugin = require('mini-css-extract-plugin')
module.exports = {
    
    
  output: {
    
    
    filename: '[name].[contenthash].js',
    publicPath: './', // base.js 中的这个配置其实会被后面覆盖掉，所以写哪个都没关系
    path: path.resolve(ROOT_PATH, 'dist')
  },
  module: {
    
    
    rules: [
      // ...
      {
    
    
        test: /\.(less|css)$/,
        use: [
          {
    
    
            loader: MiniCssExtractPlugin.loader,
            options: {
    
    
              publicPath: '../' // 注意添加了输出路径
            }
          },
          {
    
     loader: 'css-loader', options: {
    
     esModule: false } },
          'postcss-loader',
          'less-loader'
        ]
      }
    ]
  },
  plugins: [
    // ...
    new MiniCssExtractPlugin({
    
    
      // css的分离到了单独的 css 目录下，并且哈希值继续使用 contenthash
      filename: 'css/[name].[contenthash:4].css'
    })
  ]
}

webpack.dev.js

const baseConfig = require('./webpack.base')
const {
    
     merge } = require('webpack-merge')
const path = require('path')
const ROOT_PATH = path.resolve(__dirname, '../')

module.exports = merge(baseConfig, {
    
    
  mode: 'development',
  output: {
    
    
    filename: '[name].[contenthash].js',
    publicPath: '/', // dev 环境下记得使用 / 不然会有其他问题
    path: path.resolve(ROOT_PATH, 'dist')
  }
})

webpack.prod.js

const baseConfig = require('./webpack.base')
const {
    
     merge } = require('webpack-merge')
const {
    
     CleanWebpackPlugin } = require('clean-webpack-plugin')
const path = require('path')
const ROOT_PATH = path.resolve(__dirname, '../')

module.exports = merge(baseConfig, {
    
    
  mode: 'production',
  output: {
    
    
    filename: '[name].[contenthash].js',
    publicPath: './', // prod 的配置和dev目前是差不多的，不过 publicPath 换成了 './'
    path: path.resolve(ROOT_PATH, 'dist')
  },
  // 而且还多了一个打包清空dist的插件
  plugins: [new CleanWebpackPlugin()]
})

Ejecútelo para ver el efecto, el prefijo de imagen en css se ha completado ../, parece haber tenido efecto

Finalmente, sigo enfatizando la comprensión de la configuración de publicPath. ¡La ventaja de escribir un paquete web por ti mismo es que conoces el proceso de cada trabajo!

Úselo `babel`para convertir ES6 a ES5

Ahora el entorno vue también está disponible, y se instala menos (saas es lo mismo, puedo agregar una configuración de complemento cuando tengo tiempo), y luego la finalización automática de CSS no es un problema, y el pozo de separación de archivos también se escalona sobre.

Pero se pierda la pregunta más importante : abramos el navegador IE:

Este problema no es sorprendente, la sintaxis JS tiene que ser menos compatible, babel no es ajeno a esto

La instalación babel-loader, sino que también depende del plug-in de los otros plug-ins: @babel/core, @babel/plugin-transform-runtime,@babel/preset-env

npm i babel-loader @babel/core @babel/plugin-transform-runtime @babel/preset-env -D

webpack.base.js

Agregue una conversión para excluir el paquete node_modules

module.exports = {
    
    
  module: {
    
    
    rules: [
      // ...
      {
    
    
        test: /\.m?js$/,
        exclude: /node_modules/,
        use: {
    
    
          loader: 'babel-loader',
          options: {
    
    
            presets: ['@babel/preset-env'],
            plugins: ['@babel/plugin-transform-runtime']
          }
        }
      }
    ]
  }
  // ...
}

Luego vuelva a ejecutar el proyecto, vaya a IE para ver la situación: No hay problema

Empaquételo, luego ejecútelo con http-serve (principalmente desea verificar si habrá errores en el paquete), recuerde usar http-serve. De lo contrario, no podré obtener una vista previa

La conversión gramatical de js también está bien. ¡Parece que la configuración de escritura es cada vez más fluida!

Organizar los recursos del proyecto

Antes de final v0.0.2, nos fijamos de nuevo escribimos la configuración: webpack-base.js, webpack-dev.js, webpack-prod.js. Cuáles son los lugares públicos:

2 directorios públicos

ROOT_PATH
path.resolve (ROOT_PATH, 'dist')

Esta pieza también es una migración primero, y escribe un archivo de configuración público, de modo que no importa a dónde vaya el archivo de configuración, el directorio básicamente no se estropeará.

En builduna nueva carpeta PATH.js, utilizada para almacenar el proyecto de directorio que queremos usar

Se organizaron varias carpetas, el directorio de archivos dist empaquetado y el archivo index.html del archivo de plantilla, el archivo de entrada, etc. Esta parte también está allanando el camino para las siguientes páginas de entradas múltiples.

build / PATH.js

const path = require('path')
const ROOT = path.resolve(__dirname, '../')
const DIST = path.resolve(ROOT, 'dist')

const tmp_main = path.resolve(ROOT, 'src/main.js')
const TEMPLATE_HTML = path.resolve(ROOT, 'public/index.html')

module.exports = {
    
    
  ROOT,
  DIST,
  TEMPLATE_HTML,
  tmp_main
}

webpack.base.js

// 注意2个地方被注释掉了，统一从PATH引入
// const path = require('path')
// const ROOT_PATH = path.resolve(__dirname, '../')
const {
    
     DIST, tmp_main, TEMPLATE_HTML } = require('./PATH')

module.exports = {
    
    
  output: {
    
    
    filename: '[name].[contenthash].js',
    publicPath: './',
    path: DIST // 改动了这里的PATH
  },
  // ...
  plugins: [
    // ...
    // 设置html模板生成路径
    new HtmlWebpackPlugins({
    
    
      filename: 'index.html',
      template: TEMPLATE_HTML, // 改了 template 的目录
      chunks: ['main'] // 指定在html自动引入的js打包文件
    })
  ]
}

Los
cambios en los dos archivos de webpack-dev.js y webpack-prod.js también son los mismos, así que no los repetiré.

// 注意2个地方被注释掉了，统一从PATH引入
// const path = require('path')
// const ROOT_PATH = path.resolve(__dirname, '../')
const {
    
     DIST } = require('./PATH')

// output.path 改一下为 DIST 就可以了

Al final

El paquete web de la serie de pisadas (2) también ha terminado ~. Introdujo el uso de menos, separación de estilo css, finalización de prefijo css, para que sea compatible con la conversión JS realizada por IE Big Brother

Los archivos modificados son los siguientes:

Pero ahora el proyecto todavía tiene una página, y mi idea es hacer una 多入口的单页面应用. Puede que no sea nuxtmucho menos complicado, pero en cierto sentido puede reducir el problema de cargar la primera pantalla:

La próxima vista previa:

¿Qué tipo de actualización en caliente es la actualización en caliente del proyecto actual?
Realice una entrada múltiple simple
Realice el acceso automático a la entrada (lo más destacado)
Agregue la salida de la URL después de que se ejecute el código

Mi dirección de blog original, haga clic para mejorar la inclusión de SEO, gracias ~ Utilice el paquete web para crear un entorno de desarrollo vue (2)