concepts - webpack tutorial

¿Hojas de estilos de salida solo para puntos de entrada específicos en Webpack sin generación de scripts?

Question

Tengo varios puntos de entrada en la configuración de mi paquete web para inicio de sesión, aplicación, páginas de error, solo necesito iniciar sesión y la aplicación para generar un archivo js para estas entradas y el error para solo los estilos de salida. Por el momento, todas las entradas generan tanto estilos como scripts y no estoy demasiado seguro de cómo ser específico con lo que se obtiene.

Webpack

entry: {
    ''main'': [
        ''babel-polyfill'',
        ''./source/styles/src/imports/main/main.scss'',
        ''./source/app/app.main.js''
    ],
    ''login'': [
        ''./source/styles/src/imports/login/login.scss'',
        ''./source/scripts/login.js''
    ],
    ''errors'': ''./source/styles/src/imports/errors/errors.scss''
},

output: {
    path: path.resolve(__dirname, ''dist''),
    filename: ''./scripts/[name]/[name].min.js'',
    chunkFilename: ''./scripts/chunks/[id].[name].min.js''
}

Salidas

dist/
    scripts/
        errors/ <---- doesn''t need to be here
        main/
        login/
    styles/
         errors/
         main/
         login/

¿Alguien puede sugerir cómo puedo excluir que se produzcan errores en las secuencias de comandos?

Answer 1

Webpack crea un archivo separado para cada key presente en tu objeto de entrada

la key del objeto de entrada decide el name del archivo separado para crear y el value de esa clave decide qué content incluir en ese archivo

si no desea crear un archivo separado, pero incluya su contenido en el paquete, simplemente agregue la ruta de este archivo en su entrada anterior

por ejemplo

entry: {
  main: [''src/js/main.js''],
  app: [''src/js/app.js'']
}

creará dos archivos seprate 1. main.js y 2. app.js con su respectivo contenido

y

entry: {
  main: [''src/js/main.js'', ''src/js/app.js'']
}

creará un archivo main.js (porque la clave del objeto de entrada se llama main ) con el contenido de ambos archivos incluidos en él

y

entry: {
  app: [''src/js/main.js'', ''src/js/app.js'']
}

también creará un archivo app.js (porque la clave del objeto de entrada se llama app ) con el contenido de ambos archivos incluidos en él

por lo tanto, si no desea crear un archivo de errores por separado, sino incluir su contenido, no agregue la propiedad de errores en el objeto de entry

entonces tu configuración será como

entry: {
    ''main'': [
        ''babel-polyfill'',
        ''./source/styles/src/imports/main/main.scss'',
        ''./source/app/app.main.js'',
        ''./source/styles/src/imports/errors/errors.scss'' <--- so that webpack know to include content of that file also
    ],
    ''login'': [
        ''./source/styles/src/imports/login/login.scss'',
        ''./source/scripts/login.js''
    ]
}

También tenga en cuenta que necesita usar el style-loader o extract-text-webpack-plugin para separar el contenido css de su archivo JavaScript

Para crear un archivo independiente errors.css , necesita usar dos instancias diferentes de extract-text-wepack-plugin una para el archivo css regular y otra para el archivo errors.css y use include exclude property to seprate

    const extractCSS = new ExtractTextPlugin(''main.css'');
    const extractERRORS = new ExtractTextPlugin(''errors.css'');
    . 
    .
    .
module: {
    rules: [
      {
        test: //.scss$/,
        exclude: /errors/,
        use: extractCSS.extract([ ''css-loader'', ''sass-loader'' ])
      },
      {
        test: //.scss$/,
        include: /errors/,
        use: extractERRORS.extract([ ''css-loader'', ''sass-loader'' ])
      },
    ]
  },

      plugins: [
       extractCSS,
       extractERRORS
      ]