1. 程式人生 > >webpack配置檔案作用

webpack配置檔案作用

htmlWebpackPlugin的使用

它將建立一個html檔案,將打包好的各種如js、css模組引用進去,並通過提供的各種引數完成多種處理。

Vue Loader

vue-loader 是一個 webpack 的 loader,可以將.vue檔案轉換為 JavaScript 模組,

編寫 Vue.js 應用程式時,組合使用 webpack 和 vue-loader 能帶來一個現代,靈活並且非常強大的前端工作流程。

DefinePlugin

允許你建立一個在編譯時可以配置的全域性常量。這可能會對開發模式和釋出模式的構建允許不同的行為非常有用。比如,你可能會用一個全域性的常量來決定 log 在開發模式觸發而不是釋出模式。這僅僅是 DefinePlugin

提供的便利的一個場景。

new webpack.DefinePlugin({
  'process.env': require('../config/dev.env'),
  'BASE_URL':'"/sonyHost"',
    'PRODUCTION': JSON.stringify(false),
    'DEVELEPMENT': JSON.stringify(true),
}),

因為這個外掛直接做的文字替換,給定的值必須包含字串本身內的實際引號。通常,有兩種方式來達到這個效果,使用 '"production"', 或者使用 JSON.stringify('production')

if (!PRODUCTION) {
  console.log('Debug info')
}
if (PRODUCTION) {
  console.log('Production log')
}
``