Archivos de configuración separados en webpack

En webpack.config.jsalgunos archivos de configuración solo es útil durante la fase de desarrollo, el código generado por el paquete final, esta configuración no se utiliza, como dev-server. Pero algunas configuraciones no son necesarias en la etapa de desarrollo, pero sí durante el empaquetado, como el complemento uglifyjs-webpack-plugin. Si escribimos todo en este archivo sin separación, obviamente no es bueno. Luego separamos este archivo de configuración.

---

paso uno

Cree una carpeta de compilación en el directorio raíz del proyecto para almacenar los archivos de configuración y luego cree tres archivos js, como se muestra en la figura:

• El archivo base.config.js almacena la configuración básica, la configuración necesaria en la fase de desarrollo y la fase de producción
• archivo dev.config.js , que almacena la configuración utilizada solo en la fase de desarrollo
• El archivo prod.config.js , que almacena la configuración que solo se usa en la fase de producción

---

Segundo paso

Ahora necesita vincular los tres archivos de configuración juntos, usar webpack-mergee instalar:npm install webpack-merge --save-dev

Mi versión de paquete web es 3.6.0 y la versión de combinación de paquetes web es 4.2.2

A continuación, use webpack-merge en el archivo dev.config.js y el archivo prod.config.js

// prod.config.js
let UglifyWebpackPlugin = require('uglifyjs-webpack-plugin')
let webpackMerge = require('webpack-merge') //1.引入webpackMerge 
let baseConfig = require('./base.config')   //2.引入base.config.js

module.exports = webpackMerge(baseConfig,{
    
      //3.使用webpackMerge进行合并
  plugins:[
    new UglifyWebpackPlugin() //打包阶段才需要压缩js代码
  ]
})

//dev.config.js
let webpackMerge = require('webpack-merge');
let baseConfig = require('./base.config')

module.exports = webpackMerge(baseConfig,{
    
    
  devServer:{
    
     //这个配置只在开发阶段有用，打包生成最终代码的时候，这个配置就没有用了
    contentBase:'./dist',
    inline:true,
  }
})

---

Paso tres

Configure el comando en scripts en el archivo package.json:

{
    
    
	 //...其它
	"scripts": {
    
    
	    "build": "webpack --config ./build/prod.config.js",
	    "dev": "webpack-dev-server --open --config ./build/dev.config.js"
	  }
}

• En npm run buildtiempo de ejecución , use el perfil prod.config.js
• En npm run devtiempo de ejecución , use el perfil dev.config.js

Además, preste atención a la configuración de salida en base.config.js

module.exports = {
    
    
  entry: './src/main.js',
  output: {
    
    
   //注意这个地方是 ../dist，如果直接写 dist ，它会在build文件夹下生成dist文件夹
    path: path.join(__dirname, '../dist'),
    filename: 'bundle.js',
  }
}

---

datos

El enlace de descarga del código de demostración de este blog: https://webchang.lanzous.com/iB6Irkh9lpc Contraseña: f2wn